Chroma Muse AI

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":57,"_121":-5,"_122":-5,"_123":124},"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":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",3,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":37,"_35":36,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.ts","latestPath","fileId","beb8a744-a76c-11f0-8dc0-0224a6c84d84","name","fileType","script","content","// @ts-ignore\nimport { OpenAI } from \"https://esm.town/v/std/openai?v=4\";\n\n// --- AI BEHAVIORAL GUIDELINES ---\nconst GENERATION_STYLE_GUIDE =\n \"As Chroma Muse AI, you are to function as an expert in color theory and aesthetic communication. Your analysis must be articulated with the precision of a professional designer. You will synthesize abstract user concepts into tangible, structured color palettes. Avoid subjective or vague terminology in favor of descriptive, objective language. The objective is to produce output that is perceived not as generated content, but as a formal design specification delivered by a seasoned specialist.\";\n\nconst PALETTE_GENERATOR_PROMPT = `\nYou are Chroma Muse AI, an advanced system for translating abstract concepts into functional color palettes.\nThe user will provide a descriptive phrase or concept. Your task is to generate a cohesive six-color palette that accurately reflects the mood, theme, and underlying meaning of the user's input.\n\nYou MUST respond ONLY with a single, minified JSON object.\nThe root object must contain three keys: \"paletteName\", \"justification\", and \"colors\".\n1. \"paletteName\": A concise, evocative name for the generated palette (string).\n2. \"justification\": A detailed, professional explanation of why these specific colors were chosen and how they collectively represent the user's concept. This must be at least two complete sentences (string).\n3. \"colors\": An array of exactly six color objects.\n\nEach color object in the array must have four keys:\n- \"hex\": The hexadecimal color code (string, e.g., \"#RRGGBB\").\n- \"name\": A creative and descriptive name for the individual color (string).\n- \"role\": The intended functional role of the color in a design system (e.g., 'Primary Background', 'Accent', 'Primary Text', 'Subtle Border', 'Interactive Element', 'Highlight') (string).\n- \"reason\": A brief explanation for the individual color's selection (string).\n\nDO NOT deviate from this JSON structure. Ensure the hexadecimal codes are valid.\n${GENERATION_STYLE_GUIDE}\n`;\n\n// --- HTML & FRONTEND ---\nfunction generateHtml(sourceUrl) {\n return `\n\n\n \n \n Chroma Muse AI\n \n \n \n\n\n\n

\n \n

Awaiting a new concept...

Analyzing conceptual space...

An error occurred during synthesis. Please refine your concept and try again.

\n \n

\n\n\n\n`;\n}\n\nexport default async function (req: Request) {\n const url = new URL(req.url);\n const action = url.searchParams.get(\"action\");\n\n if (req.method === \"POST\" && action === \"generatePalette\") {\n try {\n const openai = new OpenAI();\n const body = await req.json();\n const concept = body.concept;\n\n if (\n !concept || typeof concept !== \"string\" || concept.trim().length < 10\n ) {\n return new Response(\n JSON.stringify({\n error:\n \"A descriptive concept of at least 10 characters is required.\",\n }),\n {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n { role: \"system\", content: PALETTE_GENERATOR_PROMPT },\n { role: \"user\", content: `Concept: \"${concept}\"` },\n ],\n temperature: 0.8,\n response_format: { type: \"json_object\" },\n });\n\n const rawContent = completion.choices[0].message.content;\n\n // The AI response is treated as untrusted input until parsed and validated.\n let parsedContent;\n try {\n parsedContent = JSON.parse(rawContent);\n } catch (parseError) {\n console.error(\"JSON Parsing Error:\", parseError);\n throw new Error(\"AI returned a non-JSON response.\");\n }\n\n // A simple structural validation to ensure the response adheres to the requested format.\n if (\n !parsedContent.paletteName || !parsedContent.justification ||\n !Array.isArray(parsedContent.colors) ||\n parsedContent.colors.length !== 6\n ) {\n throw new Error(\n \"AI response did not match the required data structure.\",\n );\n }\n\n return new Response(JSON.stringify(parsedContent), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"Chroma Muse AI Error:\", error);\n return new Response(\n JSON.stringify({\n error: error.message ||\n \"An unknown server error occurred during synthesis.\",\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n // Serve the HTML for GET requests.\n const sourceUrl = `https://${url.hostname}${url.pathname}`;\n return new Response(generateHtml(sourceUrl), {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}","http","createdAt",["D",1760274608516],"branchVersion","branchId","beb69f4e-a76c-11f0-8dc0-0224a6c84d84","id","beb64eea-a76c-11f0-8dc0-0224a6c84d84","chroma",["D",1760274594637],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","0199b749-1e1c-7399-b093-a7ba99382572","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","0199b749-1e1c-7399-b093-a97ac9fff69e","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",7,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","volt","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzMzZm1qMllGY2JhQmhhWFYwVXVvQ05aT2tJciJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":149,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":57,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":150,"_79":151,"_81":152,"_83":25},"tree",[144],"files",[144],"counts",{"_133":61,"_134":135,"_136":61,"_137":138,"_139":140},"contents",[125],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":129,"_13":130,"_33":37,"_35":36,"_24":25,"_131":-5,"_27":132},"c6fd57e2-a76c-11f0-a110-0224a6c84d84","parentId","latest",["D",1760274608516],2,"label",[28],"pulls","branches",1,"forks","envVars",{"_141":61,"_143":61},"connections",{"_141":61,"_142":61},"count","unfilledCount","emptyCount",{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":145,"_13":130,"_33":37,"_35":36,"_24":25,"_131":-5,"_146":147,"_27":148},["D",1760274608516],"children",[],[28],["D",1760274594637],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":186,"_187":188,"_189":190,"_191":25,"_192":25,"_193":25,"_194":57,"_195":-5,"_196":-7,"_197":-7,"_198":61,"_199":25,"_200":25,"_201":-5,"_202":25,"_203":25,"_204":25,"_205":-5},"ENV",{"_157":158,"_159":160,"_161":85,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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 · v3