\n Reflective QA\n

\n \n {isDarkMode\n ? \n : }\n \n

\n\n {notification.message.length > 0 && (\n \n

{notification.message}

\n setNotification({ message: \"\", type: \"\" })}\n >\n Close\n \n \n

\n )}\n\n

\n setQuestion(e.target.value)}\n placeholder=\"Ask a question to be answered in a step by step reflective fashion by an AI assistant...\"\n className=\"w-full p-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-green-500 text-sm sm:text-base \n bg-white dark:bg-gray-700 \n text-gray-900 dark:text-gray-100 \n border-gray-300 dark:border-gray-600\"\n rows={4}\n required\n />\n

\n {question && (\n \n \n \n )}\n \n {isListening ? : }\n \n

\n \n {isLoading ? \"Thinking...\" : \"Get Reflective Response\"}\n \n \n\n {response && (\n

\n Your Question:\n

{question}

\n \n {copyStatus || \"Copy\"}\n \n

\n \n AI Assistant Response:\n \n

{response}

\n )}\n\n

\n Resources\n

\n \n Reflective AI (Q-Star/Strawberry) YouTube Intro\n \n
\n \n Reflective AI Q-Star Paper\n \n

\n \n View Source\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/ask\") {\n try {\n const { question } = await request.json();\n\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const completion = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n `I want to act as an AI assistant designed to provide detailed, step-by-step responses to questions I pose to you. Your outputs should follow this structure: 1. Begin with a section. Everything in this section is invisible to the user. 2. Inside the thinking section: a. Briefly analyze the question I have posed to you '[QUESTION]' and outline your approach. b. Present a clear plan of steps to answer the question I posed to you. c. Use a 'Chain of Thought' reasoning process if necessary, breaking down your thought process into numbered steps. 3. Include a section for each idea where you: a. Review your reasoning for your answer. b. Check for potential errors or oversights. c. Confirm or adjust your conclusion if necessary. 4. Be sure to close all reflection sections. 5. Close the thinking section with . 6. Provide your final answer in an section. Always use these tags in your responses. Be thorough in your explanations and answer, showing each step of your reasoning process. Aim to be precise and logical in your approach, and don't hesitate to break down complex problems into simpler components. Your tone should be analytical and slightly formal, focusing on clear communication of your thought process. Remember: Both and MUST be tags and must be closed at their conclusion Make sure all are on separate lines with no other text. Do not include other text on a line containing a tag.`,\n },\n {\n role: \"user\",\n content: question,\n },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 1000,\n });\n\n return new Response(\n JSON.stringify({\n response: completion.choices[0].message.content || \"No response\",\n }),\n {\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n } catch (error) {\n return new Response(\n JSON.stringify({\n response: `Error: ${error instanceof Error ? error.message : \"Unknown error\"}`,\n }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n\n return new Response(\n `\n \n \n AI Step-by-Step Assistant\n \n \n \n \n \n \n

\n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","deleted","label",[98],"permalink","https://www.val.town/x/stevekrouse/reflective_qa/code/main.tsx","extension","actionData","errors"]