VEO PROMPTER Generator

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_152":153,"_154":155},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_115":-5,"_20":116,"_22":117,"_118":119,"_120":121,"_25":122,"_24":-5,"_123":-5,"_124":-5,"_125":53,"_126":127,"_128":44,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","AppleLamps","name","VEOPROMPTER","branchName","main","version","path","","project",{"_33":61,"_13":14,"_45":62,"_63":-5,"_64":44,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":94,"_95":96,"_97":98,"_99":53},"tree",[56],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":55},"id","6dc9aa12-26da-11f0-a5b3-569c3dd06744","main.tsx","fileId","6d2ac8b6-26da-11f0-a5b3-569c3dd06744","parentId","branchId","6d288ab0-26da-11f0-a5b3-569c3dd06744","branchVersion",22,"latest",true,"createdAt",["D",1734584331435],21,"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\nfunction App() {\n const [input, setInput] = useState(\"\");\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 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 response = await fetch(\"/generate-prompts\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ text: input }),\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 originalInput: input,\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;\n return { ...prev, [localType]: true };\n });\n setTimeout(() =>\n setCopyFeedback(prev => {\n const localType = 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 🚀 VEO PROMPTER\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:

Write your idea in the text input field.
Click \"Generate Prompts\" to create your enhanced prompts.
Copy and paste the generated prompts into Veo 2!
VEO PROMPTER is in beta—expect more improvements soon.

\n \n\n \n\n {error && (\n \n {error}\n \n )}\n\n {clarificationNeeded && (\n \n

Clarification Needed

{clarificationQuestion}

\n setClarificationAnswer(e.target.value)}\n placeholder=\"Your answer...\"\n className={`w-full p-3 rounded-lg border ${\n isDarkMode ? \"bg-gray-800 text-white border-gray-600\" : \"bg-white border-gray-300\"\n } focus:ring-2 focus:ring-purple-500 focus:border-transparent`}\n required\n />\n \n Submit Clarification\n \n \n \n )}\n\n {(detailedPrompt || concisePrompt) && (\n \n

Detailed Prompt

{detailedPrompt}

\n copyToClipboard(detailedPrompt, \"detailed\")}\n className={`py-2 px-4 rounded-lg ${\n isDarkMode ? \"bg-purple-600 hover:bg-purple-700\" : \"bg-purple-100 hover:bg-purple-200\"\n } text-purple-800 transition duration-300`}\n >\n {copyFeedback.detailed ? \"Copied!\" : \"Copy\"}\n \n

\n\n

Concise Prompt

{concisePrompt}

\n copyToClipboard(concisePrompt, \"concise\")}\n className={`py-2 px-4 rounded-lg ${\n isDarkMode ? \"bg-purple-600 hover:bg-purple-700\" : \"bg-purple-100 hover:bg-purple-200\"\n } text-purple-800 transition duration-300`}\n >\n {copyFeedback.concise ? \"Copied!\" : \"Copy\"}\n \n

\n \n )}\n

\n \n

VEO PROMPTER is not affiliated with Google.

\n \n \n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\") {\n const url = new URL(request.url);\n if (url.pathname === \"/generate-prompts\") {\n const { OpenAI } = await import(\"https://esm.sh/openai@4.11.1\");\n const openai = new OpenAI({\n apiKey: Deno.env.get(\"OPENAI_API_KEY\"),\n });\n\n const body = await request.json();\n const userInput = body.text;\n\n try {\n const completion = await openai.chat.completions.create({\n model: \"chatgpt-4o-latest\", // Changed from \"gpt-4o-latest\" to \"chatgpt-4o-latest\"\n messages: [\n {\n role: \"system\",\n content: `\nYou are an AI assistant that generates two types of prompts based on user input: a detailed prompt and a concise prompt.\n\nConcise Prompt Generation:\n- Focus on the main subject or theme.\n- Add relevant details to create a brief, yet descriptive prompt. Consider:\n * Environment (e.g., forest, city, desert)\n * Time of day or lighting (e.g., sunset, nighttime, bright)\n * Key objects or features (e.g., trees, skyscrapers, animals)\n * Camera angle or movement (e.g., pan, zoom, static)\n- Use action verbs to describe the scene, such as \"capture,\" \"show,\" or \"create.\"\n- Keep the prompt concise, aiming for 1-2 sentences.\n\nDetailed Prompt Generation:\n- Expand on the main subject or theme.\n- Add a wide range of details to create a rich and immersive prompt. Consider:\n * Environment: describe the setting, including terrain, climate, and atmosphere.\n * Characters or objects: describe their appearance, actions, and interactions.\n * Time of day or lighting: describe the lighting conditions, including color, intensity, and shadows.\n * Camera angle and movement: describe the camera's position, movement, and focus.\n * Mood and atmosphere: describe the emotional tone and feeling of the scene.\n- Use descriptive language to paint a vivid picture, including adjectives, adverbs, and sensory details.\n- Consider adding context or backstory to the scene, such as the characters' motivations or the environment's history.\n\nFormat your response as follows:\nCONCISE:\n[Your concise prompt here]\n\nDETAILED:\n[Your detailed prompt here]\n `,\n },\n {\n role: \"user\",\n content: `Generate a detailed prompt and a concise prompt based on this idea: \"${userInput}\"`,\n },\n ],\n max_tokens: 1000,\n });\n\n const response = completion.choices[0].message?.content;\n\n if (!response) {\n throw new Error(\"No response from OpenAI\");\n }\n\n const [conciseSection, detailedSection] = response.split(\"\\n\\n\");\n\n const concisePrompt = conciseSection.replace(\"CONCISE:\", \"\").trim();\n const detailedPrompt = detailedSection.replace(\"DETAILED:\", \"\").trim();\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 generating prompts:\", error);\n return new Response(JSON.stringify({ error: \"Failed to generate prompts\" }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n } else if (url.pathname === \"/clarify-prompts\") {\n // Handle clarification logic here\n // This is a placeholder and should be implemented based on your specific requirements\n return new Response(JSON.stringify({ message: \"Clarification endpoint not implemented\" }), {\n status: 501,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(\n `\n \n \n VEO PROMPTER Generator\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}","deleted",false,"label",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":59,"_18":60},["D",1734584331435],"children",[],[35],"6d28331c-26da-11f0-a5b3-569c3dd06744",["D",1746138002454],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","233de5ba-a1fb-4be1-8d53-25ba365179be","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","45eadff7-5b44-48ae-a010-d5b423c97254","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_114":110},"org",{"_11":12,"_108":-5,"_109":110,"_70":71,"_111":112,"_113":53},"branch",{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJxTkhOWk5HdFBLNXV3TkpnRGZrN3FMck1leSJ9","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":61,"_13":14,"_45":148,"_63":-5,"_64":44,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":-5,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":149,"_95":150,"_97":151,"_99":53},[145],"files",[145],"counts",{"_135":77,"_136":137,"_138":77,"_31":139,"_140":141},[133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":134},[35],"pulls","branches",1,"forks",{"_142":77,"_144":77},"connections",{"_142":77,"_143":77},"count","unfilledCount","emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":146,"_18":147},[],[35],["D",1746138002454],{"_11":12,"_114":110},{"_11":12,"_108":-5,"_109":110,"_70":71,"_111":112,"_113":53},{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"ctx",{"_93":-5,"_130":185,"_186":187,"_188":189,"_190":53,"_191":53,"_192":53,"_193":44,"_194":-5,"_195":-7,"_196":-7,"_197":77,"_198":53,"_199":53,"_200":-5,"_201":53,"_202":53,"_203":53,"_204":-5},"ENV",{"_156":157,"_158":159,"_160":16,"_161":162,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184},"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"]

Code