[{"_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",7,"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","import { motion } from \"framer-motion\";\nimport React, { useState } from \"react\";\n\nexport default function App() {\n const [inputType, setInputType] = useState(\"text\");\n const [input, setInput] = useState(\"\");\n const [file, setFile] = useState(null);\n const [detailedPrompt, setDetailedPrompt] = useState(\"\");\n const [concisePrompt, setConcisePrompt] = useState(\"\");\n const [error, setError] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setError(\"\");\n setIsLoading(true);\n setDetailedPrompt(\"\");\n setConcisePrompt(\"\");\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 }\n\n const response = await fetch(\"/generate-prompts\", {\n method: \"POST\",\n body: formData,\n });\n\n if (!response.ok) throw new Error(\"Failed to generate prompts\");\n\n const result = await response.json();\n setDetailedPrompt(result.detailedPrompt);\n setConcisePrompt(result.concisePrompt);\n } catch (err) {\n setError(err instanceof Error ? err.message : \"An unknown error occurred\");\n } finally {\n setIsLoading(false);\n }\n };\n\n const copyToClipboard = (text) => {\n navigator.clipboard.writeText(text);\n };\n\n return (\n

\n \n

\n 🚀 GrokPrompt Generator\n

\n \n\n

\n \n Input Type\n setInputType(e.target.value)}\n className=\"mt-2 block w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 text-base\"\n >\n \n \n \n \n\n {inputType === \"text\"\n ? (\n setInput(e.target.value)}\n placeholder=\"Enter your text here...\"\n rows={6}\n className=\"w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 resize-none\"\n />\n )\n : (\n

\n \n \n \n

\n \n Upload a file\n setFile(e.target.files?.[0])}\n className=\"sr-only\"\n />\n \n

or drag and drop

PNG, JPG, GIF up to 10MB

\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 {error && (\n \n

\n \n

{error}

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

📝 Detailed Prompt

{detailedPrompt}

\n copyToClipboard(detailedPrompt)}\n className=\"inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-purple-700 bg-purple-100 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-200\"\n >\n Copy to Clipboard\n \n

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

✨ Concise Prompt

{concisePrompt}

\n copyToClipboard(concisePrompt)}\n className=\"inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-purple-700 bg-purple-100 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-200\"\n >\n Copy to Clipboard\n \n

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

\n\n

\n \n View Source\n \n

\n \n

\n );\n}","import React, { useState } from \"react\";\nimport { motion } from \"framer-motion\";\n\nexport default function App() {\n const [inputType, setInputType] = useState('text');\n const [input, setInput] = useState('');\n const [file, setFile] = useState(null);\n const [detailedPrompt, setDetailedPrompt] = useState('');\n const [concisePrompt, setConcisePrompt] = useState('');\n const [error, setError] = useState('');\n const [isLoading, setIsLoading] = useState(false);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setError('');\n setIsLoading(true);\n setDetailedPrompt('');\n setConcisePrompt('');\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 }\n\n const response = await fetch('/generate-prompts', {\n method: 'POST',\n body: formData\n });\n\n if (!response.ok) throw new Error('Failed to generate prompts');\n\n const result = await response.json();\n setDetailedPrompt(result.detailedPrompt);\n setConcisePrompt(result.concisePrompt);\n } catch (err) {\n setError(err instanceof Error ? err.message : 'An unknown error occurred');\n } finally {\n setIsLoading(false);\n }\n };\n\n const copyToClipboard = (text) => {\n navigator.clipboard.writeText(text);\n };\n\n return (\n

\n \n

\n 🚀 GrokPrompt Generator\n

\n \n\n

\n \n Input Type\n \n \n\n {inputType === 'text' ? (\n

setInput(e.target.value)}\n                    placeholder=\"Enter your text here...\"\n                    rows={6}\n                    className=\"w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-purple-500 resize-none\"\n                  />\n                ) : (\n                  <div className=\"mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-purple-500 transition-colors duration-200\">\n                    <div className=\"space-y-2 text-center\">\n                      <svg className=\"mx-auto h-12 w-12 text-gray-400\" stroke=\"currentColor\" fill=\"none\" viewBox=\"0 0 48 48\">\n                        <path d=\"M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n                      </svg>\n                      <div className=\"flex text-sm text-gray-600 justify-center\">\n                        <label className=\"relative cursor-pointer bg-white rounded-md font-medium text-purple-600 hover:text-purple-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-purple-500\">\n                          <span>Upload a file</span>\n                          <input \n                            type=\"file\"\n                            accept=\"image/*\"\n                            onChange={(e) => setFile(e.target.files?.[0])}\n                            className=\"sr-only\"\n                          />\n                        </label>\n                        <p className=\"pl-1\">or drag and drop</p>\n                      </div>\n                      <p className=\"text-xs text-gray-500\">PNG, JPG, GIF up to 10MB</p>\n                    </div>\n                  </div>\n                )}\n              </div>\n\n              <motion.button \n                type=\"submit\"\n                disabled={isLoading || (inputType === 'text' ? !input : !file)}\n                className={`w-full py-4 px-6 rounded-xl text-white font-semibold text-lg shadow-lg\n                  ${isLoading || (inputType === 'text' ? !input : !file) \n                    ? 'bg-gray-400 cursor-not-allowed' \n                    : 'bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700'\n                  } transition-all duration-200`}\n                whileHover={{ scale: 1.02 }}\n                whileTap={{ scale: 0.98 }}\n              >\n                {isLoading ? (\n                  <span className=\"flex items-center justify-center gap-2\">\n                    <svg className=\"animate-spin h-5 w-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                      <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n                      <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>\n                    </svg>\n                    Generating...\n                  </span>\n                ) : 'Generate Prompts'}\n              </motion.button>\n            </form>\n\n            {error && (\n              <motion.div \n                className=\"mt-6 bg-red-50 border-l-4 border-red-400 p-4 rounded-lg\"\n                initial={{ opacity: 0, x: 20 }}\n                animate={{ opacity: 1, x: 0 }}\n              >\n                <div className=\"flex\">\n                  <div className=\"flex-shrink-0\">\n                    <svg className=\"h-5 w-5 text-red-400\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                      <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\" />\n                    </svg>\n                  </div>\n                  <div className=\"ml-3\">\n                    <p className=\"text-sm text-red-700\">{error}</p>\n                  </div>\n                </div>\n              </motion.div>\n            )}\n\n            {(detailedPrompt || concisePrompt) && (\n              <motion.div \n                className=\"mt-8 space-y-6\"\n                initial={{ opacity: 0, y: 20 }}\n                animate={{ opacity: 1, y: 0 }}\n                transition={{ delay: 0.2 }}\n              >\n                {detailedPrompt && (\n                  <div className=\"bg-gray-50 rounded-xl p-6 shadow-sm\">\n                    <h2 className=\"text-xl font-semibold text-gray-900 mb-4\">📝 Detailed Prompt</h2>\n                    <p className=\"text-gray-700 mb-4 whitespace-pre-wrap\">{detailedPrompt}</p>\n                    <button \n                      onClick={() => copyToClipboard(detailedPrompt)}\n                      className=\"inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-purple-700 bg-purple-100 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-200\"\n                    >\n                      Copy to Clipboard\n                    </button>\n                  </div>\n                )}\n\n                {concisePrompt && (\n                  <div className=\"bg-gray-50 rounded-xl p-6 shadow-sm\">\n                    <h2 className=\"text-xl font-semibold text-gray-900 mb-4\">✨ Concise Prompt</h2>\n                    <p className=\"text-gray-700 mb-4 whitespace-pre-wrap\">{concisePrompt}</p>\n                    <button \n                      onClick={() => copyToClipboard(concisePrompt)}\n                      className=\"inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-purple-700 bg-purple-100 hover:bg-purple-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transition-colors duration-200\"\n                    >\n                      Copy to Clipboard\n                    </button>\n                  </div>\n                )}\n              </motion.div>\n            )}\n          </div>\n\n          <div className=\"px-8 py-4 bg-gray-50 border-t border-gray-100\">\n            <div className=\"text-sm text-center\">\n              <a \n                href=\"#\"\n                className=\"font-medium text-purple-600 hover:text-purple-500 transition-colors duration-200\"\n              >\n                View Source\n              </a>\n            </div>\n          </div>\n        </motion.div>\n      </div>\n    </div>\n  );\n}","createdAt",["D",1734499380398],"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},"6b36f002-26da-11f0-a5b3-569c3dd06744","parentId","latest",["D",1734499380398],6,"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",1734499380398],"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"]
</article></body></html>

Diff · v7