GrokPrompt Generator

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_157":158,"_159":160},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_106":88,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":25,"_121":122,"_123":49,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",44,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","6b1131f0-26da-11f0-a5b3-569c3dd06744","name","fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { motion } from \"https://esm.sh/framer-motion@10.16.4\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\n/**\n * App Component\n * Handles user input (text or image), communicates with the server to generate prompts,\n * and displays the results. Includes dark mode support.\n */\nfunction App() {\n const [inputType, setInputType] = useState(\"text\");\n const [input, setInput] = useState(\"\");\n const [file, setFile] = useState(null);\n const [imageIntent, setImageIntent] = useState(\"recreate\");\n const [detailedPrompt, setDetailedPrompt] = useState(\"\");\n const [concisePrompt, setConcisePrompt] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [isDarkMode, setIsDarkMode] = useState(false);\n const [copyFeedback, setCopyFeedback] = useState({ detailed: false, concise: false });\n const [clarificationNeeded, setClarificationNeeded] = useState(false);\n const [clarificationQuestion, setClarificationQuestion] = useState(\"\");\n const [clarificationAnswer, setClarificationAnswer] = useState(\"\");\n\n // Synchronize dark mode with user's system preference.\n useEffect(() => {\n const darkModeMediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n setIsDarkMode(darkModeMediaQuery.matches);\n const handleChange = (e) => setIsDarkMode(e.matches);\n darkModeMediaQuery.addEventListener(\"change\", handleChange);\n return () => darkModeMediaQuery.removeEventListener(\"change\", handleChange);\n }, []);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setError(\"\");\n setIsLoading(true);\n setDetailedPrompt(\"\");\n setConcisePrompt(\"\");\n setClarificationNeeded(false);\n setClarificationQuestion(\"\");\n\n try {\n const formData = new FormData();\n formData.append(\"inputType\", inputType);\n if (inputType === \"text\") {\n formData.append(\"text\", input);\n } else if (file) {\n formData.append(\"image\", file);\n formData.append(\"imageIntent\", imageIntent);\n }\n\n const response = await fetch(\"/generate-prompts\", {\n method: \"POST\",\n body: formData,\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || \"Failed to generate prompts\");\n }\n\n const result = await response.json();\n console.log(\"Received result:\", result);\n\n if (result.clarificationNeeded) {\n setClarificationNeeded(true);\n setClarificationQuestion(result.clarificationQuestion);\n } else if (!result.detailedPrompt || !result.concisePrompt) {\n throw new Error(\"Invalid response from server\");\n } else {\n setDetailedPrompt(result.detailedPrompt);\n setConcisePrompt(result.concisePrompt);\n }\n } catch (err) {\n console.error(\"Error in handleSubmit:\", err);\n setError(err.message || \"An unknown error occurred\");\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleClarificationSubmit = async (e) => {\n e.preventDefault();\n setIsLoading(true);\n try {\n const response = await fetch(\"/clarify-prompts\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n inputType,\n originalInput: inputType === \"text\" ? input : file ? file.name : \"\",\n clarificationAnswer,\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.error || \"Failed to generate prompts after clarification\");\n }\n\n const result = await response.json();\n setDetailedPrompt(result.detailedPrompt);\n setConcisePrompt(result.concisePrompt);\n setClarificationNeeded(false);\n setClarificationAnswer(\"\");\n } catch (err) {\n console.error(\"Error in handleClarificationSubmit:\", err);\n setError(err.message || \"An unknown error occurred during clarification\");\n } finally {\n setIsLoading(false);\n }\n };\n\n const copyToClipboard = (text, type) => {\n navigator.clipboard.writeText(text).then(() => {\n setCopyFeedback(prev => {\n const localType = type; // Create a local copy of type\n return { ...prev, [localType]: true };\n });\n setTimeout(() =>\n setCopyFeedback(prev => {\n const localType = type; // Create a local copy of type\n return { ...prev, [localType]: false };\n }), 2000);\n }).catch(err => {\n console.error(\"Failed to copy: \", err);\n setError(\"Failed to copy to clipboard. Please try again.\");\n });\n };\n\n return (\n \n

\n \n

\n \n \n 🚀 GrokPrompt Generator\n \n setIsDarkMode(!isDarkMode)}\n className={`p-2 rounded-full \n ${isDarkMode ? \"bg-yellow-400 text-gray-900\" : \"bg-gray-200 text-gray-700\"}\n `}\n >\n {isDarkMode ? \"☀️\" : \"🌙\"}\n \n \n\n \n \n

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.

\n \n\n

\n setInputType(\"text\")}\n 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\n ${\n inputType === \"text\"\n ? \"bg-purple-600 text-white\"\n : isDarkMode\n ? \"bg-gray-600 text-gray-300 hover:bg-gray-500\"\n : \"bg-gray-200 text-gray-700 hover:bg-gray-300\"\n }\n `}\n >\n Text\n \n setInputType(\"image\")}\n 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\n ${\n inputType === \"image\"\n ? \"bg-purple-600 text-white\"\n : isDarkMode\n ? \"bg-gray-600 text-gray-300 hover:bg-gray-500\"\n : \"bg-gray-200 text-gray-700 hover:bg-gray-300\"\n }\n `}\n >\n Image\n \n

\n\n {inputType === \"text\"\n ? (\n setInput(e.target.value)}\n placeholder=\"share your idea here! ...\"\n rows={6}\n className={`w-full rounded-lg mt-2 border shadow-sm focus:border-purple-500 focus:ring-purple-500 resize-none \n ${isDarkMode ? \"bg-gray-600 text-white border-gray-500\" : \"border-gray-300 text-gray-900\"}\n p-2 // Added padding 3 (all sides)\n `}\n />\n )\n : (\n

\n setFile(e.target.files?.[0])}\n className={`w-full rounded-lg mt-2 border shadow-sm focus:border-purple-500 focus:ring-purple-500\n ${isDarkMode ? \"bg-gray-600 text-white border-gray-500\" : \"border-gray-300 text-gray-900\"}\n `}\n />\n {file && (\n

\n \n

{file.name}

\n )}\n

\n setImageIntent(\"recreate\")}\n 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\n ${\n imageIntent === \"recreate\"\n ? \"bg-purple-600 text-white\"\n : isDarkMode\n ? \"bg-gray-600 text-gray-300 hover:bg-gray-500\"\n : \"bg-gray-200 text-gray-700 hover:bg-gray-300\"\n }\n `}\n >\n Recreate Image\n \n setImageIntent(\"modify\")}\n 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\n ${\n imageIntent === \"modify\"\n ? \"bg-purple-600 text-white\"\n : isDarkMode\n ? \"bg-gray-600 text-gray-300 hover:bg-gray-500\"\n : \"bg-gray-200 text-gray-700 hover:bg-gray-300\"\n }\n `}\n >\n Modify Image\n \n

\n )}\n

\n\n \n {isLoading\n ? (\n \n \n \n \n \n \n \n Generating...\n \n )\n : \"Generate Prompts\"}\n \n \n\n {clarificationNeeded && (\n \n

\n Clarification Needed\n

{clarificationQuestion}

\n setClarificationAnswer(e.target.value)}\n placeholder=\"Your answer...\"\n rows={3}\n className={`w-full rounded-lg border shadow-sm focus:border-purple-500 focus:ring-purple-500 resize-none \n ${isDarkMode ? \"bg-gray-600 text-white border-gray-500\" : \"border-gray-300 text-gray-900\"}\n `}\n />\n \n Submit Clarification\n \n \n \n )}\n\n {error && (\n \n

\n \n

{error}

\n \n )}\n\n {(detailedPrompt || concisePrompt) && (\n \n {detailedPrompt && (\n

\n 📝 Detailed Prompt\n

\n {detailedPrompt}\n

\n \n copyToClipboard(detailedPrompt, \"detailed\")}\n 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\n ${\n isDarkMode\n ? \"text-purple-200 bg-purple-900 hover:bg-purple-800\"\n : \"text-purple-700 bg-purple-100 hover:bg-purple-200\"\n }\n `}\n >\n {copyFeedback.detailed ? \"Copied!\" : \"Copy to Clipboard\"}\n \n

\n )}\n\n {concisePrompt && (\n

\n ✨ Concise Prompt\n

\n {concisePrompt}\n

\n \n copyToClipboard(concisePrompt, \"concise\")}\n 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\n ${\n isDarkMode\n ? \"text-purple-200 bg-purple-900 hover:bg-purple-800\"\n : \"text-purple-700 bg-purple-100 hover:bg-purple-200\"\n }\n `}\n >\n {copyFeedback.concise ? \"Copied!\" : \"Copy to Clipboard\"}\n \n

\n )}\n \n )}\n

\n\n \n

\n \n View Source\n \n \n GrokPrompt is not affiliated with X or Xai.\n \n \n Created by{\" \"}\n \n @lamps_apple\n \n \n

\n \n \n\n

\n \n Tweets by lamps_apple\n \n

\n \n \n );\n}\n\n/**\n * Client entry point\n */\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n\n // Load Twitter widgets\n const script = document.createElement(\"script\");\n script.src = \"https://platform.twitter.com/widgets.js\";\n script.async = true;\n script.charset = \"utf-8\";\n document.body.appendChild(script);\n}\nif (typeof document !== \"undefined\") { client(); }\n\n/**\n * Server-side logic for generating prompts.\n * The server expects a POST request to \"/generate-prompts\" with either text or image form data.\n * It uses OpenAI API to generate detailed and concise prompts.\n */\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/generate-prompts\") {\n try {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n const formData = await request.formData();\n const inputType = formData.get(\"inputType\") as string;\n\n let analysisMessages: {\n role: string;\n content: string | { type: string; text?: string; image_url?: { url: string } };\n }[] = [];\n\n const systemMessage = {\n role: \"system\",\n content:\n `You are GrokBot, an AI designed to generate optimized and actionable prompts based on user input. Follow these guidelines:\n\n1. Treat every input as a request for prompt creation.\n2. Generate two distinct prompts:\n - Detailed Prompt: A comprehensive narrative (max 1024 characters).\n - Concise Prompt: A brief, streamlined version capturing the core essence.\n3. For image inputs, confirm the user's intent (recreate or modify).\n4. Use intelligent strategies for creative and actionable prompts:\n - Include specific details, art styles, mediums, and perspectives.\n - Add narrative and contextual elements for depth.\n5. If clarification is needed, ask targeted questions to refine the prompts.\n6. Adhere to these principles for effective prompting:\n - Specificity in description (colors, mood, composition)\n - Style and medium indication\n - Clear subject matter descriptions\n - Unique composition and perspective\n - Dynamic elements for liveliness\n - Emotion and tone for storytelling\n - Narrative context for depth\n - Time period or cultural details\n - Symbolism and metaphor for deeper meaning\n - Text integration when applicable\n7. Ensure all outputs are focused on the user's input and intent.\n8. Incorporate any mentioned names for personalization.\n\nAlways format your response as follows:\nDetailed Prompt: [Your detailed prompt here]\nConcise Prompt: [Your concise prompt here]\n\nIf clarification is needed, respond with:\nClarification Needed: true\nClarification Question: [Your question here]`,\n };\n\n analysisMessages.push(systemMessage);\n\n if (inputType === \"text\") {\n const text = formData.get(\"text\") as string;\n analysisMessages.push({\n role: \"user\",\n content: `Generate prompts based on this input: ${text}`,\n });\n } else if (inputType === \"image\") {\n const image = formData.get(\"image\") as File;\n const imageIntent = formData.get(\"imageIntent\") as string;\n\n if (!image) {\n throw new Error(\"No image file provided\");\n }\n\n // Convert image to base64\n const imageBase64 = await new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onloadend = () => {\n if (typeof reader.result === \"string\") {\n resolve(reader.result.split(\",\")[1]); // Remove the data URL prefix\n } else {\n reject(new Error(\"Failed to read image\"));\n }\n };\n reader.onerror = reject;\n reader.readAsDataURL(image);\n });\n\n analysisMessages.push({\n role: \"user\",\n content: [\n {\n type: \"text\",\n text: `Generate prompts to ${imageIntent === \"recreate\" ? \"recreate\" : \"modify\"} this image:`,\n },\n {\n type: \"image_url\",\n image_url: {\n url: `data:image/jpeg;base64,${imageBase64}`,\n },\n },\n ],\n });\n } else {\n throw new Error(\"Invalid input type\");\n }\n\n console.log(\"Sending request to OpenAI:\", JSON.stringify(analysisMessages, null, 2));\n\n const completion = await openai.chat.completions.create({\n model: \"chatgpt-4o-latest\",\n messages: analysisMessages,\n max_tokens: 1000,\n });\n\n console.log(\"Received response from OpenAI:\", JSON.stringify(completion, null, 2));\n\n const content = completion.choices[0].message.content || \"\";\n\n if (content.includes(\"Clarification Needed: true\")) {\n const clarificationQuestion = content.match(/Clarification Question: (.*)/)?.[1];\n return new Response(\n JSON.stringify({\n clarificationNeeded: true,\n clarificationQuestion,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n const detailedPromptMatch = content.match(/Detailed Prompt:?\\s*([\\s\\S]*?)(?:\\n\\s*Concise Prompt:|\\n\\s*$)/i);\n const concisePromptMatch = content.match(/Concise Prompt:?\\s*([\\s\\S]*?)$/i);\n\n let detailedPrompt = detailedPromptMatch ? detailedPromptMatch[1].trim() : \"\";\n let concisePrompt = concisePromptMatch ? concisePromptMatch[1].trim() : \"\";\n\n // If parsing fails, use the entire content as the detailed prompt\n if (!detailedPrompt && !concisePrompt) {\n detailedPrompt = content.trim();\n concisePrompt = \"Unable to generate concise prompt\";\n }\n\n // Ensure prompts are within length limits\n detailedPrompt = detailedPrompt.slice(0, 1024);\n concisePrompt = concisePrompt.slice(0, 256);\n\n console.log(\"Parsed prompts:\", { detailedPrompt, concisePrompt });\n\n return new Response(\n JSON.stringify({\n detailedPrompt,\n concisePrompt,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n console.error(\"Error in server function:\", error);\n return new Response(\n JSON.stringify({\n error: error instanceof Error ? error.message : \"An unknown error occurred\",\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/clarify-prompts\") {\n try {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n const { inputType, originalInput, clarificationAnswer } = await request.json();\n\n const systemMessage = {\n role: \"system\",\n content:\n `You are GrokBot, an AI designed to generate optimized and actionable prompts based on user input. Follow these guidelines:\n\n1. Treat every input as a request for prompt creation.\n2. Generate two distinct prompts:\n - Detailed Prompt: A comprehensive narrative (max 1024 characters).\n - Concise Prompt: A brief, streamlined version capturing the core essence.\n3. For image inputs, confirm the user's intent (recreate or modify).\n4. Use intelligent strategies for creative and actionable prompts:\n - Include specific details, art styles, mediums, and perspectives.\n - Add narrative and contextual elements for depth.\n5. If clarification is needed, ask targeted questions to refine the prompts.\n6. Adhere to these principles for effective prompting:\n - Specificity in description (colors, mood, composition)\n - Style and medium indication\n - Clear subject matter descriptions\n - Unique composition and perspective\n - Dynamic elements for liveliness\n - Emotion and tone for storytelling\n - Narrative context for depth\n - Time period or cultural details\n - Symbolism and metaphor for deeper meaning\n - Text integration when applicable\n7. Ensure all outputs are focused on the user's input and intent.\n8. Incorporate any mentioned names for personalization.\n\nAlways format your response as follows:\nDetailed Prompt: [Your detailed prompt here]\nConcise Prompt: [Your concise prompt here]`,\n };\n\n let userMessage;\n if (inputType === \"text\") {\n userMessage = {\n role: \"user\",\n content:\n `Original input: ${originalInput}\\nClarification: ${clarificationAnswer}\\nGenerate prompts based on this clarified input.`,\n };\n } else {\n userMessage = {\n role: \"user\",\n content:\n `Original input was an image.\\nClarification: ${clarificationAnswer}\\nGenerate prompts based on this clarified input.`,\n };\n }\n\n const analysisMessages = [systemMessage, userMessage];\n\n console.log(\"Sending clarification request to OpenAI:\", JSON.stringify(analysisMessages, null, 2));\n\n const completion = await openai.chat.completions.create({\n model: \"gpt-4-vision-preview\",\n messages: analysisMessages,\n max_tokens: 1000,\n });\n\n console.log(\"Received clarification response from OpenAI:\", JSON.stringify(completion, null, 2));\n\n const content = completion.choices[0].message.content || \"\";\n\n const detailedPromptMatch = content.match(/Detailed Prompt:?\\s*([\\s\\S]*?)(?:\\n\\s*Concise Prompt:|\\n\\s*$)/i);\n const concisePromptMatch = content.match(/Concise Prompt:?\\s*([\\s\\S]*?)$/i);\n\n let detailedPrompt = detailedPromptMatch ? detailedPromptMatch[1].trim() : \"\";\n let concisePrompt = concisePromptMatch ? concisePromptMatch[1].trim() : \"\";\n\n // If parsing fails, use the entire content as the detailed prompt\n if (!detailedPrompt && !concisePrompt) {\n detailedPrompt = content.trim();\n concisePrompt = \"Unable to generate concise prompt\";\n }\n\n // Ensure prompts are within length limits\n detailedPrompt = detailedPrompt.slice(0, 1024);\n concisePrompt = concisePrompt.slice(0, 256);\n\n console.log(\"Parsed clarified prompts:\", { detailedPrompt, concisePrompt });\n\n return new Response(\n JSON.stringify({\n detailedPrompt,\n concisePrompt,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n console.error(\"Error in clarification function:\", error);\n return new Response(\n JSON.stringify({\n error: error instanceof Error ? error.message : \"An unknown error occurred during clarification\",\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n return new Response(\n `\n \n \n \n \n \n GrokPrompt Generator\n \n \n \n \n

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

\n \n

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.

\n \n\n

\n \n

{file.name}

\n )}\n

\n\n \n {isLoading\n ? (\n \n \n \n \n \n \n \n Generating...\n \n )\n : \"Generate Prompts\"}\n \n \n\n {clarificationNeeded && (\n \n

\n Clarification Needed\n

{clarificationQuestion}

\n \n

{error}

\n \n )}\n\n {(detailedPrompt || concisePrompt) && (\n \n {detailedPrompt && (\n

\n 📝 Detailed Prompt\n

\n {detailedPrompt}\n

\n )}\n\n {concisePrompt && (\n

\n ✨ Concise Prompt\n

\n {concisePrompt}\n

\n )}\n \n )}\n

\n\n \n

\n \n View Source\n \n \n GrokPrompt is not affiliated with X or Xai.\n \n \n Created by{\" \"}\n \n @lamps_apple\n \n \n

\n \n \n\n

\n \n Tweets by lamps_apple\n \n

\n \n \n );\n}\n\n/**\n * Client entry point\n */\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n\n // Load Twitter widgets\n const script = document.createElement(\"script\");\n script.src = \"https://platform.twitter.com/widgets.js\";\n script.async = true;\n script.charset = \"utf-8\";\n document.body.appendChild(script);\n}\nif (typeof document !== \"undefined\") { client(); }\n\n/**\n * Server-side logic for generating prompts.\n * The server expects a POST request to \"/generate-prompts\" with either text or image form data.\n * It uses OpenAI API to generate detailed and concise prompts.\n */\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/generate-prompts\") {\n try {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n const formData = await request.formData();\n const inputType = formData.get(\"inputType\") as string;\n\n let analysisMessages: {\n role: string;\n content: string | { type: string; text?: string; image_url?: { url: string } };\n }[] = [];\n\n const systemMessage = {\n role: \"system\",\n content:\n `You are GrokBot, an AI designed to generate optimized and actionable prompts based on user input. Follow these guidelines:\n\n1. Treat every input as a request for prompt creation.\n2. Generate two distinct prompts:\n - Detailed Prompt: A comprehensive narrative (max 1024 characters).\n - Concise Prompt: A brief, streamlined version capturing the core essence.\n3. For image inputs, confirm the user's intent (recreate or modify).\n4. Use intelligent strategies for creative and actionable prompts:\n - Include specific details, art styles, mediums, and perspectives.\n - Add narrative and contextual elements for depth.\n5. If clarification is needed, ask targeted questions to refine the prompts.\n6. Adhere to these principles for effective prompting:\n - Specificity in description (colors, mood, composition)\n - Style and medium indication\n - Clear subject matter descriptions\n - Unique composition and perspective\n - Dynamic elements for liveliness\n - Emotion and tone for storytelling\n - Narrative context for depth\n - Time period or cultural details\n - Symbolism and metaphor for deeper meaning\n - Text integration when applicable\n7. Ensure all outputs are focused on the user's input and intent.\n8. Incorporate any mentioned names for personalization.\n\nAlways format your response as follows:\nDetailed Prompt: [Your detailed prompt here]\nConcise Prompt: [Your concise prompt here]\n\nIf clarification is needed, respond with:\nClarification Needed: true\nClarification Question: [Your question here]`,\n };\n\n analysisMessages.push(systemMessage);\n\n if (inputType === \"text\") {\n const text = formData.get(\"text\") as string;\n analysisMessages.push({\n role: \"user\",\n content: `Generate prompts based on this input: ${text}`,\n });\n } else if (inputType === \"image\") {\n const image = formData.get(\"image\") as File;\n const imageIntent = formData.get(\"imageIntent\") as string;\n\n if (!image) {\n throw new Error(\"No image file provided\");\n }\n\n // Convert image to base64\n const imageBase64 = await new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onloadend = () => {\n if (typeof reader.result === \"string\") {\n resolve(reader.result.split(\",\")[1]); // Remove the data URL prefix\n } else {\n reject(new Error(\"Failed to read image\"));\n }\n };\n reader.onerror = reject;\n reader.readAsDataURL(image);\n });\n\n analysisMessages.push({\n role: \"user\",\n content: [\n {\n type: \"text\",\n text: `Generate prompts to ${imageIntent === \"recreate\" ? \"recreate\" : \"modify\"} this image:`,\n },\n {\n type: \"image_url\",\n image_url: {\n url: `data:image/jpeg;base64,${imageBase64}`,\n },\n },\n ],\n });\n } else {\n throw new Error(\"Invalid input type\");\n }\n\n console.log(\"Sending request to OpenAI:\", JSON.stringify(analysisMessages, null, 2));\n\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o-latest\",\n messages: analysisMessages,\n max_tokens: 1000,\n });\n\n console.log(\"Received response from OpenAI:\", JSON.stringify(completion, null, 2));\n\n const content = completion.choices[0].message.content || \"\";\n\n if (content.includes(\"Clarification Needed: true\")) {\n const clarificationQuestion = content.match(/Clarification Question: (.*)/)?.[1];\n return new Response(\n JSON.stringify({\n clarificationNeeded: true,\n clarificationQuestion,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n const detailedPromptMatch = content.match(/Detailed Prompt:?\\s*([\\s\\S]*?)(?:\\n\\s*Concise Prompt:|\\n\\s*$)/i);\n const concisePromptMatch = content.match(/Concise Prompt:?\\s*([\\s\\S]*?)$/i);\n\n let detailedPrompt = detailedPromptMatch ? detailedPromptMatch[1].trim() : \"\";\n let concisePrompt = concisePromptMatch ? concisePromptMatch[1].trim() : \"\";\n\n // If parsing fails, use the entire content as the detailed prompt\n if (!detailedPrompt && !concisePrompt) {\n detailedPrompt = content.trim();\n concisePrompt = \"Unable to generate concise prompt\";\n }\n\n // Ensure prompts are within length limits\n detailedPrompt = detailedPrompt.slice(0, 1024);\n concisePrompt = concisePrompt.slice(0, 256);\n\n console.log(\"Parsed prompts:\", { detailedPrompt, concisePrompt });\n\n return new Response(\n JSON.stringify({\n detailedPrompt,\n concisePrompt,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n console.error(\"Error in server function:\", error);\n return new Response(\n JSON.stringify({\n error: error instanceof Error ? error.message : \"An unknown error occurred\",\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/clarify-prompts\") {\n try {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n const { inputType, originalInput, clarificationAnswer } = await request.json();\n\n const systemMessage = {\n role: \"system\",\n content:\n `You are GrokBot, an AI designed to generate optimized and actionable prompts based on user input. Follow these guidelines:\n\n1. Treat every input as a request for prompt creation.\n2. Generate two distinct prompts:\n - Detailed Prompt: A comprehensive narrative (max 1024 characters).\n - Concise Prompt: A brief, streamlined version capturing the core essence.\n3. For image inputs, confirm the user's intent (recreate or modify).\n4. Use intelligent strategies for creative and actionable prompts:\n - Include specific details, art styles, mediums, and perspectives.\n - Add narrative and contextual elements for depth.\n5. If clarification is needed, ask targeted questions to refine the prompts.\n6. Adhere to these principles for effective prompting:\n - Specificity in description (colors, mood, composition)\n - Style and medium indication\n - Clear subject matter descriptions\n - Unique composition and perspective\n - Dynamic elements for liveliness\n - Emotion and tone for storytelling\n - Narrative context for depth\n - Time period or cultural details\n - Symbolism and metaphor for deeper meaning\n - Text integration when applicable\n7. Ensure all outputs are focused on the user's input and intent.\n8. Incorporate any mentioned names for personalization.\n\nAlways format your response as follows:\nDetailed Prompt: [Your detailed prompt here]\nConcise Prompt: [Your concise prompt here]`,\n };\n\n let userMessage;\n if (inputType === \"text\") {\n userMessage = {\n role: \"user\",\n content:\n `Original input: ${originalInput}\\nClarification: ${clarificationAnswer}\\nGenerate prompts based on this clarified input.`,\n };\n } else {\n userMessage = {\n role: \"user\",\n content:\n `Original input was an image.\\nClarification: ${clarificationAnswer}\\nGenerate prompts based on this clarified input.`,\n };\n }\n\n const analysisMessages = [systemMessage, userMessage];\n\n console.log(\"Sending clarification request to OpenAI:\", JSON.stringify(analysisMessages, null, 2));\n\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o-latest\",\n messages: analysisMessages,\n max_tokens: 1000,\n });\n\n console.log(\"Received clarification response from OpenAI:\", JSON.stringify(completion, null, 2));\n\n const content = completion.choices[0].message.content || \"\";\n\n const detailedPromptMatch = content.match(/Detailed Prompt:?\\s*([\\s\\S]*?)(?:\\n\\s*Concise Prompt:|\\n\\s*$)/i);\n const concisePromptMatch = content.match(/Concise Prompt:?\\s*([\\s\\S]*?)$/i);\n\n let detailedPrompt = detailedPromptMatch ? detailedPromptMatch[1].trim() : \"\";\n let concisePrompt = concisePromptMatch ? concisePromptMatch[1].trim() : \"\";\n\n // If parsing fails, use the entire content as the detailed prompt\n if (!detailedPrompt && !concisePrompt) {\n detailedPrompt = content.trim();\n concisePrompt = \"Unable to generate concise prompt\";\n }\n\n // Ensure prompts are within length limits\n detailedPrompt = detailedPrompt.slice(0, 1024);\n concisePrompt = concisePrompt.slice(0, 256);\n\n console.log(\"Parsed clarified prompts:\", { detailedPrompt, concisePrompt });\n\n return new Response(\n JSON.stringify({\n detailedPrompt,\n concisePrompt,\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n console.error(\"Error in clarification function:\", error);\n return new Response(\n JSON.stringify({\n error: error instanceof Error ? error.message : \"An unknown error occurred during clarification\",\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n return new Response(\n `\n \n \n \n \n \n GrokPrompt Generator\n \n \n \n \n

\n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}","createdAt",["D",1734582488092],"branchVersion","branchId","6b0cf45a-26da-11f0-a5b3-569c3dd06744","id","6b0ca022-26da-11f0-a5b3-569c3dd06744","GROKPROMPT",["D",1746137998917],"deletedAt","legacyEnvVars",true,"privacy","public","httpPrivacy","description","imageUrl","233de5ba-a1fb-4be1-8d53-25ba365179be","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","45eadff7-5b44-48ae-a010-d5b423c97254","tursoName","6b0ca02226da11f0a5b3569c3dd06744","tursoHostname","6b0ca02226da11f0a5b3569c3dd06744-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789687835965],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":55,"_102":103,"_104":25},"branch",{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"isOwned",45,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","AppleLamps","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJxTkhOWk5HdFBLNXV3TkpnRGZrN3FMck1leSJ9","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":152,"_47":-5,"_48":49,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":31,"_57":49,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":153,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":154,"_82":155,"_84":156,"_86":25},"tree",[147],"files",[147],"counts",{"_136":61,"_137":138,"_139":61,"_140":141,"_142":143},"contents",[128],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":129,"_32":28,"_30":31,"_130":-5,"_41":42,"_40":14,"_131":25,"_38":132,"_13":133,"_33":34,"_35":37,"_24":25,"_134":-5,"_27":135},"6c466cc0-26da-11f0-a5b3-569c3dd06744","parentId","latest",["D",1734582488092],43,"label",[28],"pulls","branches",1,"forks","envVars",{"_144":61,"_146":61},"connections",{"_144":61,"_145":61},"count","unfilledCount","emptyCount",{"_43":129,"_32":28,"_30":31,"_130":-5,"_41":42,"_40":14,"_131":25,"_38":148,"_13":133,"_33":34,"_35":37,"_24":25,"_134":-5,"_149":150,"_27":151},["D",1734582488092],"children",[],[28],["D",1746137998917],["D",1789687835965],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":55,"_102":103,"_104":25},{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"ctx",{"_80":-5,"_125":190,"_191":192,"_193":194,"_195":25,"_196":25,"_197":25,"_198":49,"_199":-5,"_200":-7,"_201":-7,"_202":61,"_203":25,"_204":25,"_205":-5,"_206":25,"_207":25,"_208":25,"_209":-5},"ENV",{"_161":162,"_163":164,"_165":88,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v44