/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { motion } from "https://esm.sh/framer-motion@10.16.4"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useState } from "https://esm.sh/react@18.2.0"; /** * App Component * Handles user input (text or image), communicates with the server to generate prompts, * and displays the results. Includes dark mode support. */ function App() { const [inputType, setInputType] = useState("text"); const [input, setInput] = useState(""); const [file, setFile] = useState(null); const [imageIntent, setImageIntent] = useState("recreate"); const [detailedPrompt, setDetailedPrompt] = useState(""); const [concisePrompt, setConcisePrompt] = useState(""); const [error, setError] = useState(""); const [isLoading, setIsLoading] = useState(false); const [isDarkMode, setIsDarkMode] = useState(false); const [copyFeedback, setCopyFeedback] = useState({ detailed: false, concise: false }); const [clarificationNeeded, setClarificationNeeded] = useState(false); const [clarificationQuestion, setClarificationQuestion] = useState(""); const [clarificationAnswer, setClarificationAnswer] = useState(""); // Synchronize dark mode with user's system preference. useEffect(() => { const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); setIsDarkMode(darkModeMediaQuery.matches); const handleChange = (e) => setIsDarkMode(e.matches); darkModeMediaQuery.addEventListener("change", handleChange); return () => darkModeMediaQuery.removeEventListener("change", handleChange); }, []); const handleSubmit = async (e) => { e.preventDefault(); setError(""); setIsLoading(true); setDetailedPrompt(""); setConcisePrompt(""); setClarificationNeeded(false); setClarificationQuestion(""); try { const formData = new FormData(); formData.append("inputType", inputType); if (inputType === "text") { formData.append("text", input); } else if (file) { formData.append("image", file); formData.append("imageIntent", imageIntent); } const response = await fetch("/generate-prompts", { method: "POST", body: formData, }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error || "Failed to generate prompts"); } const result = await response.json(); console.log("Received result:", result); if (result.clarificationNeeded) { setClarificationNeeded(true); setClarificationQuestion(result.clarificationQuestion); } else if (!result.detailedPrompt || !result.concisePrompt) { throw new Error("Invalid response from server"); } else { setDetailedPrompt(result.detailedPrompt); setConcisePrompt(result.concisePrompt); } } catch (err) { console.error("Error in handleSubmit:", err); setError(err.message || "An unknown error occurred"); } finally { setIsLoading(false); } }; const handleClarificationSubmit = async (e) => { e.preventDefault(); setIsLoading(true); try { const response = await fetch("/clarify-prompts", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ inputType, originalInput: inputType === "text" ? input : file ? file.name : "", clarificationAnswer, }), }); if (!response.ok) { const errorData = await response.json(); throw new Error(errorData.error || "Failed to generate prompts after clarification"); } const result = await response.json(); setDetailedPrompt(result.detailedPrompt); setConcisePrompt(result.concisePrompt); setClarificationNeeded(false); setClarificationAnswer(""); } catch (err) { console.error("Error in handleClarificationSubmit:", err); setError(err.message || "An unknown error occurred during clarification"); } finally { setIsLoading(false); } }; const copyToClipboard = (text, type) => { navigator.clipboard.writeText(text).then(() => { setCopyFeedback(prev => { const localType = type; // Create a local copy of type return { ...prev, [localType]: true }; }); setTimeout(() => setCopyFeedback(prev => { const localType = type; // Create a local copy of type return { ...prev, [localType]: false }; }), 2000); }).catch(err => { console.error("Failed to copy: ", err); setError("Failed to copy to clipboard. Please try again."); }); }; return (

🚀 GrokPrompt Generator

How to Use:

Choose between text or image input.
Write your idea or upload an image.
For image recreation, select "Recreate" (the "Modify" option is under construction).
Click "Generate Prompts" to create your enhanced prompts.
Copy and paste the generated prompts into Grok!
GrokPrompt is in beta—expect more improvements soon.

{inputType === "text" ? (

setInput(e.target.value)}
                      placeholder="share your idea here! ..."
                      rows={6}
                      className={`w-full rounded-lg mt-2 border shadow-sm focus:border-purple-500 focus:ring-purple-500 resize-none 
                      ${isDarkMode ? "bg-gray-600 text-white border-gray-500" : "border-gray-300 text-gray-900"}
                      p-2 // Added padding 3 (all sides)
                    `}
                    />
                  )
                  : (
                    <div className="space-y-4">
                      <input
                        type="file"
                        accept="image/*"
                        onChange={(e) => setFile(e.target.files?.[0])}
                        className={`w-full rounded-lg mt-2 border shadow-sm focus:border-purple-500 focus:ring-purple-500
                        ${isDarkMode ? "bg-gray-600 text-white border-gray-500" : "border-gray-300 text-gray-900"}
                      `}
                      />
                      {file && (
                        <div className="flex flex-col items-center">
                          <img
                            src={URL.createObjectURL(file)}
                            alt="Uploaded"
                            className="w-32 h-32 object-cover rounded-lg mb-2"
                          />
                          <p className={`text-sm ${isDarkMode ? "text-gray-300" : "text-gray-500"}`}>{file.name}</p>
                        </div>
                      )}
                      <div className="flex space-x-4">
                        <button
                          type="button"
                          onClick={() => setImageIntent("recreate")}
                          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
                          ${
                            imageIntent === "recreate"
                              ? "bg-purple-600 text-white"
                              : isDarkMode
                              ? "bg-gray-600 text-gray-300 hover:bg-gray-500"
                              : "bg-gray-200 text-gray-700 hover:bg-gray-300"
                          }
                        `}
                        >
                          Recreate Image
                        </button>
                        <button
                          type="button"
                          onClick={() => setImageIntent("modify")}
                          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
                          ${
                            imageIntent === "modify"
                              ? "bg-purple-600 text-white"
                              : isDarkMode
                              ? "bg-gray-600 text-gray-300 hover:bg-gray-500"
                              : "bg-gray-200 text-gray-700 hover:bg-gray-300"
                          }
                        `}
                        >
                          Modify Image
                        </button>
                      </div>
                    </div>
                  )}
              </div>

<motion.button
                type="submit"
                disabled={isLoading || (inputType === "text" ? !input : !file)}
                className={`w-full py-4 px-6 rounded-xl text-white font-semibold text-lg shadow-lg transition-all duration-200 
                  ${
                  isLoading || (inputType === "text" ? !input : !file)
                    ? "bg-gray-400 cursor-not-allowed"
                    : isDarkMode
                    ? "bg-purple-600 hover:bg-purple-700"
                    : "bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700"
                }
                `}
                whileHover={{ scale: !isLoading ? 1.02 : 1 }}
                whileTap={{ scale: !isLoading ? 0.98 : 1 }}
              >
                {isLoading
                  ? (
                    <span className="flex items-center justify-center gap-2">
                      <svg
                        className="animate-spin h-5 w-5 text-white"
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                      >
                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4">
                        </circle>
                        <path
                          className="opacity-75"
                          fill="currentColor"
                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                        >
                        </path>
                      </svg>
                      Generating...
                    </span>
                  )
                  : "Generate Prompts"}
              </motion.button>
            </form>

{clarificationNeeded && (
              <motion.div
                className="mt-8"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
              >
                <h2 className={`text-xl font-semibold mb-4 ${isDarkMode ? "text-gray-100" : "text-gray-900"}`}>
                  Clarification Needed
                </h2>
                <p className={`mb-4 ${isDarkMode ? "text-gray-300" : "text-gray-700"}`}>{clarificationQuestion}</p>
                <form onSubmit={handleClarificationSubmit} className="space-y-4">
                  <textarea
                    value={clarificationAnswer}
                    onChange={(e) => setClarificationAnswer(e.target.value)}
                    placeholder="Your answer..."
                    rows={3}
                    className={`w-full rounded-lg border shadow-sm focus:border-purple-500 focus:ring-purple-500 resize-none 
                      ${isDarkMode ? "bg-gray-600 text-white border-gray-500" : "border-gray-300 text-gray-900"}
                    `}
                  />
                  <button
                    type="submit"
                    className={`w-full 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
                      ${
                      isDarkMode
                        ? "bg-purple-600 text-white hover:bg-purple-700"
                        : "bg-purple-100 text-purple-700 hover:bg-purple-200"
                    }
                    `}
                  >
                    Submit Clarification
                  </button>
                </form>
              </motion.div>
            )}

{error && (
              <motion.div
                className={`mt-6 border-l-4 p-4 rounded-lg
                  ${isDarkMode ? "bg-red-900 border-red-700" : "bg-red-50 border-red-400"}
                `}
                initial={{ opacity: 0, x: 20 }}
                animate={{ opacity: 1, x: 0 }}
              >
                <div className="flex">
                  <div className="flex-shrink-0">
                    <svg className={`h-5 w-5 text-red-400`} viewBox="0 0 20 20" fill="currentColor">
                      <path
                        fillRule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
                        clipRule="evenodd"
                      />
                    </svg>
                  </div>
                  <div className="ml-3">
                    <p className={`text-sm ${isDarkMode ? "text-red-200" : "text-red-700"}`}>{error}</p>
                  </div>
                </div>
              </motion.div>
            )}

{(detailedPrompt || concisePrompt) && (
              <motion.div
                className="mt-8 space-y-6"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ delay: 0.2 }}
              >
                {detailedPrompt && (
                  <div className={`${isDarkMode ? "bg-gray-700" : "bg-gray-50"} rounded-xl p-6 shadow-sm`}>
                    <h2 className={`text-xl font-semibold mb-4 ${isDarkMode ? "text-gray-100" : "text-gray-900"}`}>
                      📝 Detailed Prompt
                    </h2>
                    <p className={`${isDarkMode ? "text-gray-300" : "text-gray-700"} mb-4 whitespace-pre-wrap`}>
                      {detailedPrompt}
                    </p>
                    <button
                      onClick={() =>
                        copyToClipboard(detailedPrompt, "detailed")}
                      className={`inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-200
                        ${
                        isDarkMode
                          ? "text-purple-200 bg-purple-900 hover:bg-purple-800"
                          : "text-purple-700 bg-purple-100 hover:bg-purple-200"
                      }
                      `}
                    >
                      {copyFeedback.detailed ? "Copied!" : "Copy to Clipboard"}
                    </button>
                  </div>
                )}

{concisePrompt && (
                  <div className={`${isDarkMode ? "bg-gray-700" : "bg-gray-50"} rounded-xl p-6 shadow-sm`}>
                    <h2 className={`text-xl font-semibold mb-4 ${isDarkMode ? "text-gray-100" : "text-gray-900"}`}>
                      ✨ Concise Prompt
                    </h2>
                    <p className={`${isDarkMode ? "text-gray-300" : "text-gray-700"} mb-4 whitespace-pre-wrap`}>
                      {concisePrompt}
                    </p>
                    <button
                      onClick={() =>
                        copyToClipboard(concisePrompt, "concise")}
                      className={`inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-200
                        ${
                        isDarkMode
                          ? "text-purple-200 bg-purple-900 hover:bg-purple-800"
                          : "text-purple-700 bg-purple-100 hover:bg-purple-200"
                      }
                      `}
                    >
                      {copyFeedback.concise ? "Copied!" : "Copy to Clipboard"}
                    </button>
                  </div>
                )}
              </motion.div>
            )}
          </div>

<div
            className={`px-8 py-4 border-t 
            ${isDarkMode ? "bg-gray-800 border-gray-700" : "bg-gray-50 border-gray-100"}
          `}
          >
            <div className="text-sm text-center flex flex-col sm:flex-row justify-between items-center space-y-2 sm:space-y-0">
              <a
                href={import.meta.url.replace("esm.town", "val.town")}
                target="_top"
                className={`font-medium transition-colors duration-200 
                  ${isDarkMode ? "text-purple-400 hover:text-purple-300" : "text-purple-600 hover:text-purple-500"}
                `}
              >
                View Source
              </a>
              <span className={`${isDarkMode ? "text-gray-400" : "text-gray-600"}`}>
                GrokPrompt is not affiliated with X or Xai.
              </span>
              <span className={`${isDarkMode ? "text-gray-400" : "text-gray-600"}`}>
                Created by{" "}
                <a
                  href="https://twitter.com/lamps_apple"
                  target="_blank"
                  rel="noopener noreferrer"
                  className={`font-medium ${
                    isDarkMode ? "text-purple-400 hover:text-purple-300" : "text-purple-600 hover:text-purple-500"
                  }`}
                >
                  @lamps_apple
                </a>
              </span>
            </div>
          </div>
        </motion.div>

<div className="mt-8">
          <a className="twitter-timeline" data-height="600" href="https://twitter.com/lamps_apple?ref_src=twsrc%5Etfw">
            Tweets by lamps_apple
          </a>
        </div>
      </div>
    </div>
  );
}

/**
 * Client entry point
 */
function client() {
  createRoot(document.getElementById("root")).render(<App />);

// Load Twitter widgets
  const script = document.createElement("script");
  script.src = "https://platform.twitter.com/widgets.js";
  script.async = true;
  script.charset = "utf-8";
  document.body.appendChild(script);
}
if (typeof document !== "undefined") { client(); }

/**
 * Server-side logic for generating prompts.
 * The server expects a POST request to "/generate-prompts" with either text or image form data.
 * It uses OpenAI API to generate detailed and concise prompts.
 */
export default async function server(request: Request): Promise<Response> {
  if (request.method === "POST" && new URL(request.url).pathname === "/generate-prompts") {
    try {
      const { OpenAI } = await import("https://esm.town/v/std/openai");
      const openai = new OpenAI();
      const formData = await request.formData();
      const inputType = formData.get("inputType") as string;

let analysisMessages: {
        role: string;
        content: string | { type: string; text?: string; image_url?: { url: string } };
      }[] = [];

const systemMessage = {
        role: "system",
        content:
          `You are GrokBot, an AI designed to generate optimized and actionable prompts based on user input. Follow these guidelines:

1. Treat every input as a request for prompt creation.
2. Generate two distinct prompts:
   - Detailed Prompt: A comprehensive narrative (max 1024 characters).
   - Concise Prompt: A brief, streamlined version capturing the core essence.
3. For image inputs, confirm the user's intent (recreate or modify).
4. Use intelligent strategies for creative and actionable prompts:
   - Include specific details, art styles, mediums, and perspectives.
   - Add narrative and contextual elements for depth.
5. If clarification is needed, ask targeted questions to refine the prompts.
6. Adhere to these principles for effective prompting:
   - Specificity in description (colors, mood, composition)
   - Style and medium indication
   - Clear subject matter descriptions
   - Unique composition and perspective
   - Dynamic elements for liveliness
   - Emotion and tone for storytelling
   - Narrative context for depth
   - Time period or cultural details
   - Symbolism and metaphor for deeper meaning
   - Text integration when applicable
7. Ensure all outputs are focused on the user's input and intent.
8. Incorporate any mentioned names for personalization.

Always format your response as follows:
Detailed Prompt: [Your detailed prompt here]
Concise Prompt: [Your concise prompt here]

If clarification is needed, respond with:
Clarification Needed: true
Clarification Question: [Your question here]`,
      };

analysisMessages.push(systemMessage);

if (inputType === "text") {
        const text = formData.get("text") as string;
        analysisMessages.push({
          role: "user",
          content: `Generate prompts based on this input: ${text}`,
        });
      } else if (inputType === "image") {
        const image = formData.get("image") as File;
        const imageIntent = formData.get("imageIntent") as string;

if (!image) {
          throw new Error("No image file provided");
        }

// Convert image to base64
        const imageBase64 = await new Promise<string>((resolve, reject) => {
          const reader = new FileReader();
          reader.onloadend = () => {
            if (typeof reader.result === "string") {
              resolve(reader.result.split(",")[1]); // Remove the data URL prefix
            } else {
              reject(new Error("Failed to read image"));
            }
          };
          reader.onerror = reject;
          reader.readAsDataURL(image);
        });

analysisMessages.push({
          role: "user",
          content: [
            {
              type: "text",
              text: `Generate prompts to ${imageIntent === "recreate" ? "recreate" : "modify"} this image:`,
            },
            {
              type: "image_url",
              image_url: {
                url: `data:image/jpeg;base64,${imageBase64}`,
              },
            },
          ],
        });
      } else {
        throw new Error("Invalid input type");
      }

console.log("Sending request to OpenAI:", JSON.stringify(analysisMessages, null, 2));

const completion = await openai.chat.completions.create({
        model: "chatgpt-4o-latest",
        messages: analysisMessages,
        max_tokens: 1000,
      });

console.log("Received response from OpenAI:", JSON.stringify(completion, null, 2));

const content = completion.choices[0].message.content || "";

if (content.includes("Clarification Needed: true")) {
        const clarificationQuestion = content.match(/Clarification Question: (.*)/)?.[1];
        return new Response(
          JSON.stringify({
            clarificationNeeded: true,
            clarificationQuestion,
          }),
          {
            headers: { "Content-Type": "application/json" },
          },
        );
      }

const detailedPromptMatch = content.match(/Detailed Prompt:?\s*([\s\S]*?)(?:\n\s*Concise Prompt:|\n\s*$)/i);
      const concisePromptMatch = content.match(/Concise Prompt:?\s*([\s\S]*?)$/i);

let detailedPrompt = detailedPromptMatch ? detailedPromptMatch[1].trim() : "";
      let concisePrompt = concisePromptMatch ? concisePromptMatch[1].trim() : "";

// If parsing fails, use the entire content as the detailed prompt
      if (!detailedPrompt && !concisePrompt) {
        detailedPrompt = content.trim();
        concisePrompt = "Unable to generate concise prompt";
      }

// Ensure prompts are within length limits
      detailedPrompt = detailedPrompt.slice(0, 1024);
      concisePrompt = concisePrompt.slice(0, 256);

console.log("Parsed prompts:", { detailedPrompt, concisePrompt });

return new Response(
        JSON.stringify({
          detailedPrompt,
          concisePrompt,
        }),
        {
          headers: { "Content-Type": "application/json" },
        },
      );
    } catch (error) {
      console.error("Error in server function:", error);
      return new Response(
        JSON.stringify({
          error: error instanceof Error ? error.message : "An unknown error occurred",
        }),
        {
          status: 500,
          headers: { "Content-Type": "application/json" },
        },
      );
    }
  }

if (request.method === "POST" && new URL(request.url).pathname === "/clarify-prompts") {
    try {
      const { OpenAI } = await import("https://esm.town/v/std/openai");
      const openai = new OpenAI();
      const { inputType, originalInput, clarificationAnswer } = await request.json();

const systemMessage = {
        role: "system",
        content:
          `You are GrokBot, an AI designed to generate optimized and actionable prompts based on user input. Follow these guidelines:

Always format your response as follows:
Detailed Prompt: [Your detailed prompt here]
Concise Prompt: [Your concise prompt here]`,
      };

let userMessage;
      if (inputType === "text") {
        userMessage = {
          role: "user",
          content:
            `Original input: ${originalInput}\nClarification: ${clarificationAnswer}\nGenerate prompts based on this clarified input.`,
        };
      } else {
        userMessage = {
          role: "user",
          content:
            `Original input was an image.\nClarification: ${clarificationAnswer}\nGenerate prompts based on this clarified input.`,
        };
      }

const analysisMessages = [systemMessage, userMessage];

console.log("Sending clarification request to OpenAI:", JSON.stringify(analysisMessages, null, 2));

const completion = await openai.chat.completions.create({
        model: "chatgpt-4o-latest",
        messages: analysisMessages,
        max_tokens: 1000,
      });

console.log("Received clarification response from OpenAI:", JSON.stringify(completion, null, 2));

const content = completion.choices[0].message.content || "";

const detailedPromptMatch = content.match(/Detailed Prompt:?\s*([\s\S]*?)(?:\n\s*Concise Prompt:|\n\s*$)/i);
      const concisePromptMatch = content.match(/Concise Prompt:?\s*([\s\S]*?)$/i);

let detailedPrompt = detailedPromptMatch ? detailedPromptMatch[1].trim() : "";
      let concisePrompt = concisePromptMatch ? concisePromptMatch[1].trim() : "";

// Ensure prompts are within length limits
      detailedPrompt = detailedPrompt.slice(0, 1024);
      concisePrompt = concisePrompt.slice(0, 256);

console.log("Parsed clarified prompts:", { detailedPrompt, concisePrompt });

return new Response(
        JSON.stringify({
          detailedPrompt,
          concisePrompt,
        }),
        {
          headers: { "Content-Type": "application/json" },
        },
      );
    } catch (error) {
      console.error("Error in clarification function:", error);
      return new Response(
        JSON.stringify({
          error: error instanceof Error ? error.message : "An unknown error occurred during clarification",
        }),
        {
          status: 500,
          headers: { "Content-Type": "application/json" },
        },
      );
    }
  }

return new Response(
    `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>GrokPrompt Generator</title>
      <script src="https://cdn.tailwindcss.com"></script>
      <script src="https://esm.town/v/std/catch"></script>
    </head>
    <body>
      <div id="root"></div>
      <script type="module" src="${import.meta.url}"></script>
    </body>
    </html>
  `,
    {
      headers: { "Content-Type": "text/html" },
    },
  );
}</article></body></html>

GROKPROMPT

Version 4