Skip to content

Commit

Permalink
rerun added
Browse files Browse the repository at this point in the history
  • Loading branch information
@Precious-Macaulay
Precious-Macaulay committed Oct 31, 2024
1 parent 2ea90b8 commit 791024c
Show file tree
Hide file tree
Showing 7 changed files with 202 additions and 45 deletions.
11 changes: 11 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
"axios": "^1.7.7",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
"dotenv": "^16.4.5",
"file-saver": "^2.0.5",
"http-proxy": "^1.18.1",
Expand Down
136 changes: 106 additions & 30 deletions src/components/PromptCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,11 @@ import { Skeleton } from "./ui/skeleton";
import { useStore } from "@/store/promptStore";
import { Prompt } from "@/types";
import usePromptPolling from "@/hooks/usePromptPolling";
import { Redo, Copy } from "lucide-react";
import { Button } from "./ui/button";
import { Loader2 } from "lucide-react";
import { useCopy } from "@/hooks/useCopy";
import { createPrompt } from "@/api/prompts";

type PromptKeys = keyof Prompt;

Expand All @@ -15,29 +20,29 @@ interface DisplayProperty {
}

const displayProperties: DisplayProperty[] = [
{ key: 'ar', label: 'Aspect Ratio' },
{ key: 'style', label: 'Style' },
{ key: 'cfg_scale', label: 'Scale' },
{ key: 'seed', label: 'Seed' },
{ key: 'steps', label: 'Steps' },
{ key: 'w', label: 'Size', extraText: 'x', link: '' }, // Adjust size display as needed
{ key: 'scheduler', label: 'Scheduler' },
{ key: 'color_grading', label: 'Color Grading' },
{ key: 'film_grain', label: 'Film Grain' },
{ key: 'super_resolution', label: 'Super-Resolution' },
{ key: 'only_upscale', label: 'Upscale', link: 'https://docs.astria.ai/docs/use-cases/upscale' },
{ key: 'tiled_upscale', label: 'Tiled Upscale', link: 'https://docs.astria.ai/docs/features/tiled-upscale' },
{ key: 'hires_fix', label: 'HiRes Fix' },
{ key: 'face_correct', label: 'Face Correct' },
{ key: 'face_swap', label: 'Face Swap', link: 'https://docs.astria.ai/docs/features/face-swap' },
{ key: 'inpaint_faces', label: 'Inpaint Faces', link: 'https://docs.astria.ai/docs/features/face-inpainting' },
{ key: 'is_multiperson', label: 'Multiperson' }, // This would require additional logic for multi-person vs multi-pass
{ key: 'prompt_expansion', label: 'Prompt Expansion' },
{ key: 'theme', label: 'Theme' },
{ key: 'input_image', label: 'Image' },
{ key: 'mask_image', label: 'Mask' },
{ key: 'controlnet', label: 'ControlNet', link: 'https://docs.astria.ai/docs/use-cases/controlnet' },
{ key: 'use_lpw', label: 'Weighted' },
{ key: "ar", label: "Aspect Ratio" },
{ key: "style", label: "Style" },
{ key: "cfg_scale", label: "Scale" },
{ key: "seed", label: "Seed" },
{ key: "steps", label: "Steps" },
{ key: "w", label: "Size", extraText: "x" }, // Adjust size display as needed
{ key: "scheduler", label: "Scheduler" },
{ key: "color_grading", label: "Color Grading" },
{ key: "film_grain", label: "Film Grain" },
{ key: "super_resolution", label: "Super-Resolution" },
{ key: "only_upscale", label: "Upscale", link: "https://docs.astria.ai/docs/use-cases/upscale" },
{ key: "tiled_upscale", label: "Tiled Upscale", link: "https://docs.astria.ai/docs/features/tiled-upscale" },
{ key: "hires_fix", label: "HiRes Fix" },
{ key: "face_correct", label: "Face Correct" },
{ key: "face_swap", label: "Face Swap", link: "https://docs.astria.ai/docs/features/face-swap" },
{ key: "inpaint_faces", label: "Inpaint Faces", link: "https://docs.astria.ai/docs/features/face-inpainting" },
{ key: "is_multiperson", label: "Multiperson" },
{ key: "prompt_expansion", label: "Prompt Expansion" },
{ key: "theme", label: "Theme" },
{ key: "input_image", label: "Image" },
{ key: "mask_image", label: "Mask" },
{ key: "controlnet", label: "ControlNet", link: "https://docs.astria.ai/docs/use-cases/controlnet" },
{ key: "use_lpw", label: "Weighted" },
];

interface PromptCardProps {
Expand Down Expand Up @@ -100,7 +105,7 @@ const PromptCard: React.FC<PromptCardProps> = React.memo(({ prompt: initialPromp
key={key}
className="text-gray-700 text-[12px] font-medium bg-slate-200 px-2 rounded-sm"
>
{label}: {value}{extraText || ''}
{label}: {value}{extraText || ""}
{link && (
<a href={link} className="text-blue-500 underline ml-1" target="_blank" rel="noopener noreferrer">
Docs
Expand All @@ -112,21 +117,92 @@ const PromptCard: React.FC<PromptCardProps> = React.memo(({ prompt: initialPromp
</div>
);

const [isHovered, setIsHovered] = React.useState(false);

const handleMouseEnter = () => setIsHovered(true);
const handleMouseLeave = () => setIsHovered(false);

const [isLoading, setIsLoading] = React.useState(false);
const { isCopied, handleCopy } = useCopy();

const { refreshUserPrompts } = useStore();

const allowedKeys = new Set([
'text', 'controlnet', 'color_grading', 'super_resolution', 'hires_fix', 'inpaint_faces',
'face_correct', 'face_swap', 'ar', 'denoising_strength', 'controlnet_conditioning_scale',
'num_images', 'w', 'h'
]);

const handleRerun = async () => {
setIsLoading(true);
// await updateSinglePrompt(displayPrompt.id)
const formData = new FormData();
for (const key of Object.keys(displayPrompt) as (keyof Prompt)[]) {
if (allowedKeys.has(key)) {
console.log("key", key, displayPrompt[key]);
if (displayPrompt[key] !== null) {
formData.append(`prompt[${key}]`, displayPrompt[key] as string);
}
}
}

formData.append('prompt[tune_id]', "1504944");

console.log("formData", {
...Object.fromEntries(formData),
});

const response = await createPrompt(formData);
console.log(response);
refreshUserPrompts();
setIsLoading(false);
};

return (
<div className="mb-[4px] w-full cursor-pointer flex flex-col-reverse md:flex-row">
<div
className="mb-[4px] w-full cursor-pointer flex flex-col-reverse md:flex-row"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
{renderImages()}

<div className="md:w-[30%] p-2 flex flex-col text-sm text-black">
<div className="flex-1">
<p className="font-medium">{displayPrompt.text?.length > 100 ? (displayPrompt.text?.slice(0, 100) + '...') : displayPrompt.text}</p>
<p className="font-medium">
{displayPrompt.text?.length > 100 ? `${displayPrompt.text.slice(0, 100)}...` : displayPrompt.text}
</p>
{renderProperties()}
</div>
<div>
sjndsjdnjsn
</div>
{isHovered && (
<div className="flex gap-2 absolute right-0 md:relative">
<Button
variant="outline"
size="sm"
onClick={handleRerun}
disabled={isLoading}
className="flex items-center gap-1"
>
{isLoading ? (
<Loader2 className="w-4 h-4 animate-spin" />
) : (
<Redo className="w-4 h-4" />
)}
<span className="hidden md:inline">Rerun</span>
</Button>
<Button
variant="outline"
size="sm"
onClick={() => handleCopy(displayPrompt)}
className="flex items-center gap-1"
>
<Copy className="w-4 h-4" />
<span className="hidden md:inline">{isCopied ? "Copied!" : "Copy"}</span>
</Button>
</div>
)}
</div>
</div>
);
});

export default PromptCard;
export default PromptCard;
19 changes: 16 additions & 3 deletions src/components/PromptForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import {
} from "@/components/ui/tooltip"
import { AdvancedControls } from './AdvancedControls';
import { createPrompt } from '@/api/prompts';
import { toast } from 'react-toastify';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css'
import { useStore } from '@/store/promptStore';
import { useImageUpload } from '@/hooks/useImageUpload';
import usePaste from '@/hooks/usePaste';
Expand Down Expand Up @@ -161,13 +162,14 @@ const PromptForm: React.FC<PromptFormProps> = () => {

const response = await createPrompt(formData);
console.log(response);
toast.success('Prompt generated successfully!');
toast.success('Prompt created successfully!');
refreshUserPrompts();
setPromptText('');
setShowImageControls(false);
setShowAdvancedControls(false);
} catch (error) {
toast.error('Failed to generate. Please try again.');
const errorMessage = (error as any)?.response?.data?.text?.join(', ') || (error as any).message;
toast.error(`Error creating prompt: ${errorMessage}`);
console.error(error);
} finally {
setIsLoading(false);
Expand Down Expand Up @@ -351,6 +353,17 @@ const PromptForm: React.FC<PromptFormProps> = () => {
)}
</div>
</div>
<ToastContainer
position="top-right"
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="light"
/>
</div>
);
};
Expand Down
36 changes: 36 additions & 0 deletions src/components/ui/badge.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const badgeVariants = cva(
"inline-flex items-center rounded-md border border-zinc-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-zinc-950 focus:ring-offset-2 dark:border-zinc-800 dark:focus:ring-zinc-300",
{
variants: {
variant: {
default:
"border-transparent bg-zinc-900 text-zinc-50 shadow hover:bg-zinc-900/80 dark:bg-zinc-50 dark:text-zinc-900 dark:hover:bg-zinc-50/80",
secondary:
"border-transparent bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80",
destructive:
"border-transparent bg-red-500 text-zinc-50 shadow hover:bg-red-500/80 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/80",
outline: "text-zinc-950 dark:text-zinc-50",
},
},
defaultVariants: {
variant: "default",
},
}
)

export interface BadgeProps
extends React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
)
}

export { Badge, badgeVariants }
42 changes: 31 additions & 11 deletions src/pages/UsersPrompts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,16 @@ import PromptForm from "@/components/PromptForm";
import usePrompts from "@/hooks/usePrompts";
import { useInfiniteScroll } from "@/hooks/useInfiniteScroll";
import InfiniteScroll from "react-infinite-scroll-component";
import { format, isToday, isYesterday, parseISO } from "date-fns";

const UsersPrompts: React.FC = () => {
const { prompts, fetchMoreData } = usePrompts(false);
const [hasMore, setHasMore] = useState(true);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);

console.log(prompts);
const loadMorePrompts = useCallback(async () => {
if (loading) return;

setLoading(true);
setError(null);
try {
Expand All @@ -36,6 +35,22 @@ const UsersPrompts: React.FC = () => {
loadMore: loadMorePrompts,
});

// Helper function to format date headers
const formatDateHeader = (dateString: string) => {
const date = parseISO(dateString);
if (isToday(date)) return "Today";
if (isYesterday(date)) return "Yesterday";
return format(date, "dd MMM yyyy");
};

// Group prompts by date
const groupedPrompts = prompts.reduce((acc, prompt) => {
const dateHeader = formatDateHeader(prompt.created_at);
if (!acc[dateHeader]) acc[dateHeader] = [];
acc[dateHeader].push(prompt);
return acc;
}, {} as Record<string, typeof prompts>);

return (
<div className="flex-1 relative">
<PromptForm />
Expand All @@ -53,14 +68,19 @@ const UsersPrompts: React.FC = () => {
scrollThreshold={0.8}
style={{ overflow: "hidden" }}
>
<div className="grid grid-cols-1">
{prompts.map((prompt, index) => (
<div
key={prompt.id || index}
ref={index === prompts.length - 1 ? lastPromptElementRef : null}
>
<PromptCard prompt={prompt} />
</div>
<div className="grid grid-cols-1 gap-2">
{Object.entries(groupedPrompts).map(([dateHeader, groupedPrompts]) => (
<React.Fragment key={dateHeader}>
<h2 className="text-xl font-semibold mt-4 mb-2 text-black">{dateHeader}</h2>
{groupedPrompts.map((prompt, index) => (
<div
key={prompt.id || index}
ref={index === prompts.length - 1 ? lastPromptElementRef : null}
>
<PromptCard prompt={prompt} />
</div>
))}
</React.Fragment>
))}
</div>
</InfiniteScroll>
Expand All @@ -69,4 +89,4 @@ const UsersPrompts: React.FC = () => {
);
};

export default WithLayout(UsersPrompts);
export default WithLayout(UsersPrompts);
2 changes: 1 addition & 1 deletion tsconfig.app.tsbuildinfo
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"root":["./src/main.tsx","./src/test.ts","./src/vite-env.d.ts","./src/api/prompts.ts","./src/components/AddLoraText.tsx","./src/components/AdvancedControls.tsx","./src/components/AspectRatioSlider.tsx","./src/components/ColorGradingSelector.tsx","./src/components/ControlNetSelector.tsx","./src/components/Gallery.tsx","./src/components/GalleryItem.tsx","./src/components/ImageZoom.tsx","./src/components/LoadingSpinner.tsx","./src/components/MasonryLayout.tsx","./src/components/MobileTabNav.tsx","./src/components/ModelSelector.tsx","./src/components/MoonToggle.tsx","./src/components/Navbar.tsx","./src/components/PromptCard.tsx","./src/components/PromptDetails.tsx","./src/components/PromptForm.tsx","./src/components/PromptImage.tsx","./src/components/TabNavigation.tsx","./src/components/WithLayout.tsx","./src/components/theme-provider.tsx","./src/components/ui/bidirectional-slider.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/dialog.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/select.tsx","./src/components/ui/sheet.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/slider.tsx","./src/components/ui/switch.tsx","./src/components/ui/tabs.tsx","./src/components/ui/textarea.tsx","./src/components/ui/toast.tsx","./src/components/ui/toaster.tsx","./src/components/ui/tooltip.tsx","./src/hooks/use-toast.ts","./src/hooks/useCopy.ts","./src/hooks/useImageUpload.ts","./src/hooks/useInfiniteScroll.ts","./src/hooks/useLike.ts","./src/hooks/usePaste.ts","./src/hooks/usePromptNavigation.ts","./src/hooks/usePromptPolling.ts","./src/hooks/usePrompts.ts","./src/lib/utils.ts","./src/pages/Gallery.tsx","./src/pages/Prompt.tsx","./src/pages/UsersPrompts.tsx","./src/pages/index.ts","./src/services/apiClient.ts","./src/store/promptStore.ts","./src/types/index.ts"],"version":"5.6.3"}
{"root":["./src/main.tsx","./src/test.ts","./src/vite-env.d.ts","./src/api/prompts.ts","./src/components/AddLoraText.tsx","./src/components/AdvancedControls.tsx","./src/components/AspectRatioSlider.tsx","./src/components/ColorGradingSelector.tsx","./src/components/ControlNetSelector.tsx","./src/components/Gallery.tsx","./src/components/GalleryItem.tsx","./src/components/ImageZoom.tsx","./src/components/LoadingSpinner.tsx","./src/components/MasonryLayout.tsx","./src/components/MobileTabNav.tsx","./src/components/ModelSelector.tsx","./src/components/MoonToggle.tsx","./src/components/Navbar.tsx","./src/components/PromptCard.tsx","./src/components/PromptDetails.tsx","./src/components/PromptForm.tsx","./src/components/PromptImage.tsx","./src/components/TabNavigation.tsx","./src/components/WithLayout.tsx","./src/components/theme-provider.tsx","./src/components/ui/badge.tsx","./src/components/ui/bidirectional-slider.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/dialog.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/select.tsx","./src/components/ui/sheet.tsx","./src/components/ui/skeleton.tsx","./src/components/ui/slider.tsx","./src/components/ui/switch.tsx","./src/components/ui/tabs.tsx","./src/components/ui/textarea.tsx","./src/components/ui/toast.tsx","./src/components/ui/toaster.tsx","./src/components/ui/tooltip.tsx","./src/hooks/use-toast.ts","./src/hooks/useCopy.ts","./src/hooks/useImageUpload.ts","./src/hooks/useInfiniteScroll.ts","./src/hooks/useLike.ts","./src/hooks/usePaste.ts","./src/hooks/usePromptNavigation.ts","./src/hooks/usePromptPolling.ts","./src/hooks/usePrompts.ts","./src/lib/utils.ts","./src/pages/Gallery.tsx","./src/pages/Prompt.tsx","./src/pages/UsersPrompts.tsx","./src/pages/index.ts","./src/services/apiClient.ts","./src/store/promptStore.ts","./src/types/index.ts"],"version":"5.6.3"}

0 comments on commit 791024c

Please sign in to comment.