Val Town Code SearchReturn to Val Town

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

20    if (!file) return null;
21
22    if (file.type.startsWith("image/")) {
23      return (
24        <img
25          src={URL.createObjectURL(file)}
26          alt="Uploaded content"
27          className="file-preview-image"
28        />
29      );
111          type="file"
112          onChange={handleFileChange}
113          accept="image/*,.pdf"
114          style={{ display: "none" }}
115          multiple
317      ];
318
319      let imageFiles = [];
320      if (files && files.length > 0) {
321        imageFiles = files.filter(file => file.startsWith("data:image"));
322        if (imageFiles.length > 0) {
323          messages.push({
324            role: "user",
325            content: [
326              { type: "text", text: prompt },
327              ...imageFiles.map(file => ({ type: "image_url", image_url: { url: file } })),
328            ],
329          });
341      const completion = await openai.chat.completions.create({
342        messages: messages,
343        model: imageFiles.length > 0 ? "chatgpt-4o-latest" : "gpt-4o",
344        max_tokens: 10000,
345      });
630}
631
632.file-preview-image {
633  max-width: 200px;
634  max-height: 200px;

6/**
7 * App Component
8 * Handles user input (text or image), communicates with the server to generate prompts,
9 * and displays the results. Includes dark mode support.
10 */
13  const [input, setInput] = useState("");
14  const [file, setFile] = useState(null);
15  const [imageIntent, setImageIntent] = useState("recreate");
16  const [detailedPrompt, setDetailedPrompt] = useState("");
17  const [concisePrompt, setConcisePrompt] = useState("");
48        formData.append("text", input);
49      } else if (file) {
50        formData.append("image", file);
51        formData.append("imageIntent", imageIntent);
52      }
53
190                <p className="text-lg font-semibold">How to Use:</p>
191                <ol className="list-decimal list-inside mt-2 space-y-1 text-sm">
192                  <li>Choose between text or image input.</li>
193                  <li>Write your idea or upload an image.</li>
194                  <li>For image recreation, select "Recreate" (the "Modify" option is under construction).</li>
195                  <li>Click "Generate Prompts" to create your enhanced prompts.</li>
196                  <li>Copy and paste the generated prompts into Grok!</li>
220                  <button
221                    type="button"
222                    onClick={() => setInputType("image")}
223                    className={`flex-1 py-2 px-4 rounded-lg font-semibold text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-200
224                      ${
225                      inputType === "image"
226                        ? "bg-purple-600 text-white"
227                        : isDarkMode
231                    `}
232                  >
233                    Image
234                  </button>
235                </div>
252                      <input
253                        type="file"
254                        accept="image/*"
255                        onChange={(e) => setFile(e.target.files?.[0])}
256                        className={`w-full rounded-lg mt-2 border shadow-sm focus:border-purple-500 focus:ring-purple-500
271                        <button
272                          type="button"
273                          onClick={() => setImageIntent("recreate")}
274                          className={`flex-1 py-2 px-4 rounded-lg font-semibold text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-200
275                          ${
276                            imageIntent === "recreate"
277                              ? "bg-purple-600 text-white"
278                              : isDarkMode
282                        `}
283                        >
284                          Recreate Image
285                        </button>
286                        <button
287                          type="button"
288                          onClick={() => setImageIntent("modify")}
289                          className={`flex-1 py-2 px-4 rounded-lg font-semibold text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-200
290                          ${
291                            imageIntent === "modify"
292                              ? "bg-purple-600 text-white"
293                              : isDarkMode
297                        `}
298                        >
299                          Modify Image
300                        </button>
301                      </div>
525/**
526 * Server-side logic for generating prompts.
527 * The server expects a POST request to "/generate-prompts" with either text or image form data.
528 * It uses OpenAI API to generate detailed and concise prompts.
529 */
538      let analysisMessages: {
539        role: string;
540        content: string | { type: string; text?: string; image_url?: { url: string } };
541      }[] = [];
542
550   - Detailed Prompt: A comprehensive narrative (max 1024 characters).
551   - Concise Prompt: A brief, streamlined version capturing the core essence.
5523. For image inputs, confirm the user's intent (recreate or modify).
5534. Use intelligent strategies for creative and actionable prompts:
554   - Include specific details, art styles, mediums, and perspectives.
586          content: `Generate prompts based on this input: ${text}`,
587        });
588      } else if (inputType === "image") {
589        const image = formData.get("image") as File;
590        const imageIntent = formData.get("imageIntent") as string;
591
592        if (!image) {
593          throw new Error("No image file provided");
594        }
595
596        // Convert image to base64
597        const imageBase64 = await new Promise<string>((resolve, reject) => {
598          const reader = new FileReader();
599          reader.onloadend = () => {
601              resolve(reader.result.split(",")[1]); // Remove the data URL prefix
602            } else {
603              reject(new Error("Failed to read image"));
604            }
605          };
606          reader.onerror = reject;
607          reader.readAsDataURL(image);
608        });
609
613            {
614              type: "text",
615              text: `Generate prompts to ${imageIntent === "recreate" ? "recreate" : "modify"} this image:`,
616            },
617            {
618              type: "image_url",
619              image_url: {
620                url: `data:image/jpeg;base64,${imageBase64}`,
621              },
622            },
708   - Detailed Prompt: A comprehensive narrative (max 1024 characters).
709   - Concise Prompt: A brief, streamlined version capturing the core essence.
7103. For image inputs, confirm the user's intent (recreate or modify).
7114. Use intelligent strategies for creative and actionable prompts:
712   - Include specific details, art styles, mediums, and perspectives.
743          role: "user",
744          content:
745            `Original input was an image.\nClarification: ${clarificationAnswer}\nGenerate prompts based on this clarified input.`,
746        };
747      }

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169