AI Sentence Transformer

and user's CSS context) ---\n return (\n // Use

tag and 'fluid' class to match user's CSS example context\n

AI Sentence Transformer (:has() CSS)

\n {console.log(\"SentenceEditor rendering...\")}\n {/* Form structure similar to CodeV2 */}\n

\n {\n setSentence(e.target.value);\n if (analysisResult) setAnalysisResult(null);\n if (error) setError(null);\n }}\n placeholder=\"Enter a sentence to analyze\"\n disabled={isLoading}\n style={{\n /* Basic styles from CodeV2 or rely on layer base/demo */ flex: 1,\n padding: \"10px\",\n border: \"1px solid #ddd\",\n borderRadius: \"4px\",\n fontSize: \"inherit\",\n }}\n />\n \n {isLoading ? \"Analyzing...\" : \"Analyze\"}\n \n \n\n {error && !isLoading && (\n \n Error: {error}\n \n )}\n\n {/* Sentence Display Area - Render inside a paragraph or div */}\n {/* The 'renderedSentence' useMemo returns an array of spans */}\n

\n {renderedSentence}\n

\n\n {/* Link to Val Town Source */}\n \n View Source on Val Town\n \n {/* Bear link from user's CSS example (optional) */}\n {/* SVG HERE */}\n

\n );\n}\n\n// --- Root Application Component & Client-Side Mounting ---\nfunction App() {\n console.log(\"App rendering...\");\n return ;\n}\nfunction client() {\n console.log(\"client() called.\");\n const rootElement = document.getElementById(\"root\"); // Use ID \"root\" from CodeV2 example HTML\n if (rootElement) {\n console.log(\"Found #root. Mounting app...\");\n try {\n createRoot(rootElement).render();\n console.log(\"React mount initiated.\");\n }\n catch (mountError) {\n console.error(\"Mount Error:\", mountError);\n rootElement.innerHTML = `

Mount Error.

${mountError.stack}

`;\n }\n } else {\n console.error(\"#root not found!\");\n try {\n document.body.innerHTML = `

Error: #root not found.

`;\n } catch (e) {}\n }\n}\nif (typeof document !== \"undefined\") {\n console.log(\"Browser env. Scheduling client().\");\n if (document.readyState === \"loading\") { document.addEventListener(\"DOMContentLoaded\", client); } else { client(); }\n} else { console.log(\"Non-browser env? Skipping client().\"); }\n\n// --- Val Town Server Function (Default Export) ---\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n // --- API Endpoint: /analyze ---\n if (url.pathname === \"/analyze\" && request.method === \"POST\") {\n console.log(\"POST /analyze\");\n try {\n let sentence: string | undefined;\n try {\n const body = await request.json();\n sentence = body.sentence;\n } catch (e) {\n return new Response(JSON.stringify({ error: \"Invalid JSON.\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n if (!sentence || typeof sentence !== \"string\" || sentence.trim().length === 0) {\n return new Response(JSON.stringify({ error: \"'sentence' required.\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n console.log(`Analyzing: \"${sentence.substring(0, 50)}...\"`);\n\n // --- OpenAI Setup using std/openai ---\n // NOTE: Using std/openai as requested via example. API key handling might be managed by Val Town infrastructure.\n // If issues occur, consider switching back to `npm:openai` and using API Key secret.\n console.log(\"Using std/openai client\");\n const openai = new OpenAI(); // Assumes std/openai handles auth/key implicitly\n\n // --- System Prompt for Structured Tree Output ---\n // (Same complex prompt as CodeV3 asking for AnalysisTree with effects)\n const systemPrompt =\n `You are an AI language structuring expert... [PROMPT REMAINS THE SAME AS PREVIOUS VERSION - asking for AnalysisTree JSON with effects, IDs, options etc, using double quotes in JSON output] ... Output ONLY the raw, valid JSON object using double quotes for all JSON keys and string values.`;\n\n console.log(\"Sending prompt to OpenAI (gpt-4o)...\");\n const response = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [{ role: \"system\", content: systemPrompt }],\n response_format: { type: \"json_object\" },\n temperature: 0.2,\n max_tokens: 3000,\n });\n console.log(`OpenAI Response. Finish: ${response.choices[0]?.finish_reason}.`);\n\n const aiResponseContent = response.choices[0]?.message?.content;\n if (!aiResponseContent) throw new Error(\"AI returned empty content.\");\n\n let jsonResponse: AnalysisTree;\n try {\n jsonResponse = JSON.parse(aiResponseContent);\n if (!jsonResponse || !Array.isArray(jsonResponse.structure) || !jsonResponse.sentenceId)\n throw new Error(\"AI JSON validation failed.\");\n console.log(`Parsed AI response. Nodes: ${jsonResponse.structure.length}`);\n } catch (e) {\n console.error(\"Parse Error:\", e.message, \"\\nSnippet:\", aiResponseContent.substring(0, 200));\n throw new Error(`AI invalid JSON: ${e.message}`);\n }\n\n return new Response(JSON.stringify(jsonResponse), { headers: { \"Content-Type\": \"application/json\" } });\n } catch (error) {\n console.error(`Error in /analyze: ${error.message}`, error.stack);\n return new Response(JSON.stringify({ error: \"Failed to analyze.\", details: error.message }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // --- Default HTML Route (Simpler structure like CodeV2, but with user's CSS) ---\n console.log(`Serving HTML for path: ${url.pathname}`);\n const htmlContent = `\n \n \n \n \n AI Sentence Transformer - CSS :has()\n \n \n \n \n \n \n \n \n \n \n

\n \n \n \n \n \n \n `;\n return new Response(htmlContent, { headers: { \"Content-Type\": \"text/html\" } });\n}","deleted","label",[98],"permalink","https://www.val.town/x/find/sentences/code/main.tsx","extension","actionData","errors"]