Skip to content

Commit

Permalink
pipelines: show parameter selection on pipeline creation (#136)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gioelecerati
gioelecerati authored Jan 31, 2025
1 parent 90c7b5c commit 8331201
Show file tree
Hide file tree
Showing 2 changed files with 313 additions and 61 deletions.
176 changes: 115 additions & 61 deletions apps/app/components/pipeline/create-pipeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,22 +14,60 @@ import { createPipelineFromFormData } from "@/app/api/pipelines/create";
import { toast } from "sonner";
import { useRouter } from "next/navigation";
import { LoaderCircleIcon } from "lucide-react";
import PipelineParamsSelector from "./pipeline-params-selector";

export default function CreatePipeline() {
const { authenticated, user, ready: isAuthLoaded } = usePrivy();
const [formData, setFormData] = useState<Record<string, unknown>>({});
const [isSubmitting, setIsSubmitting] = useState(false);
const [currentStep, setCurrentStep] = useState(1);
const router = useRouter();

const handleChange = (
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
id: string
) => {
setFormData((prev) => ({ ...prev, [id]: e.target.value }));
console.log(formData);
};

const handleSubmit = async () => {
const handleNext = async () => {

if (!formData.name) {
toast.error("Please enter a name");
return;
}
if (!formData.description) {
toast.error("Please enter a description");
return;
}
if (!formData.comfyJson) {
toast.error("Please upload a ComfyUI JSON file");
return;
}

try {
const jsonFile = formData.comfyJson as File;
const jsonContent = await jsonFile.text();
const parsedJson = JSON.parse(jsonContent);

setFormData(prev => ({
...prev,
comfyJson: parsedJson
}));

setCurrentStep(2);
} catch (error) {
console.error("Error parsing JSON:", error);
toast.error("Invalid JSON file");
return;
}
};

const handleBack = () => {
setCurrentStep(1);
};

const handleSubmit = async (updatedFormData: Record<string, unknown>) => {
if (!user?.id) {
toast.error("User not found");
return;
Expand All @@ -38,23 +76,29 @@ export default function CreatePipeline() {
const toastId = toast.loading("Creating pipeline...");
try {
const formDataToSend = new FormData();
Object.entries(formData).forEach(([key, value]) => {
formDataToSend.append(decamelize(key), value as any);
Object.entries(updatedFormData).forEach(([key, value]) => {
if (key === 'comfyJson') {
// Create a new File object from the JSON string
const jsonBlob = new Blob([JSON.stringify(value)], { type: 'application/json' });
formDataToSend.append(decamelize(key), jsonBlob, 'workflow.json');
} else {
formDataToSend.append(decamelize(key), value as any);
}
});

const { pipeline, smokeTestStream } = await createPipelineFromFormData(
formDataToSend,
user.id
);
console.log("Pipeline created::Client::", pipeline);
router.push(
`/pipelines/${pipeline.id}?streamId=${smokeTestStream.id}&validation=true`
);
toast.dismiss(toastId);
toast.success("Pipeline created successfully");
} catch (error) {
console.error("Error details:", error);
toast.dismiss(toastId);
const errorMessage =
error instanceof Error ? error.message : String(error);
const errorMessage = error instanceof Error ? error.message : String(error);
toast.error(`Failed to create pipeline: ${errorMessage}`);
} finally {
setIsSubmitting(false);
Expand Down Expand Up @@ -84,65 +128,75 @@ export default function CreatePipeline() {
<div className="p-4">
<h3 className="font-medium text-lg">Create pipeline</h3>
<ScrollArea className="h-[90vh] max-w-xl w-full">
<div className="space-y-4 mt-4 p-0.5">
<div className="space-y-1.5">
<Label className="text-muted-foreground">Name</Label>
<Input
placeholder="e.g., Live Portrait Generator"
id="name"
onChange={(e) => handleChange(e, "name")}
/>
</div>
{currentStep === 1 ? (
<div className="space-y-4 mt-4 p-0.5">
{/* Step 1 - Pipeline creation form */}
<div className="space-y-1.5">
<Label className="text-muted-foreground">Name</Label>
<Input
placeholder="e.g., Live Portrait Generator"
id="name"
onChange={(e) => handleChange(e, "name")}
/>
</div>

<div className="space-y-1.5">
<Label className="text-muted-foreground">Version</Label>
<Input
defaultValue="1.0.0"
placeholder="e.g., 1.0.0 in format major.minor.patch"
id="version"
onChange={(e) => handleChange(e, "version")}
/>
</div>
<div className="space-y-1.5">
<Label className="text-muted-foreground">Version</Label>
<Input
value={formData.version as string || "1.0.0"}
placeholder="e.g., 1.0.0 in format major.minor.patch"
id="version"
onChange={(e) => handleChange(e, "version")}
/>
</div>

<div className="space-y-1.5">
<Label className="text-muted-foreground">Description</Label>
<Textarea
placeholder="Describe what your pipeline does and its use cases"
id="description"
className="h-24"
onChange={(e) => handleChange(e, "description")}
/>
</div>
<div className="space-y-1.5">
<Label className="text-muted-foreground">Description</Label>
<Textarea
placeholder="Describe what your pipeline does and its use cases"
id="description"
className="h-24"
onChange={(e) => handleChange(e, "description")}
/>
</div>

<div className="space-y-1.5">
<Label className="text-muted-foreground">Cover image</Label>
<FileUploadDropzone
placeholder="Upload cover image"
id="coverImage"
setFormData={setFormData}
fileType={FileType.Image}
/>
</div>
<div className="space-y-1.5">
<Label className="text-muted-foreground">Cover image</Label>
<FileUploadDropzone
placeholder="Upload cover image"
id="coverImage"
setFormData={setFormData}
fileType={FileType.Image}
/>
</div>

<div className="space-y-1.5">
<Label className="text-muted-foreground">ComfyUI JSON</Label>
<FileUploadDropzone
placeholder="Upload your ComfyUI workflow JSON"
id="comfyJson"
setFormData={setFormData}
fileType={FileType.Json}
/>
</div>
<div className="flex">
<Button
className="mt-4 uppercase text-xs"
onClick={handleSubmit}
disabled={isSubmitting}
>
Create
</Button>
<div className="space-y-1.5">
<Label className="text-muted-foreground">ComfyUI JSON</Label>
<FileUploadDropzone
placeholder="Upload your ComfyUI workflow JSON"
id="comfyJson"
setFormData={setFormData}
fileType={FileType.Json}
/>
</div>

<div className="flex">
<Button
className="mt-4 uppercase text-xs"
onClick={handleNext}
>
Next
</Button>
</div>
</div>
</div>
) : (
<PipelineParamsSelector
formData={formData}
onBack={handleBack}
onSubmit={handleSubmit}
isSubmitting={isSubmitting}
/>
)}
</ScrollArea>
</div>
);
Expand Down
Loading

0 comments on commit 8331201

Please sign in to comment.