/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { MicrophoneIcon, MoonIcon, StopIcon, SunIcon, XCircleIcon, } from "https://esm.sh/@heroicons/react/24/solid?deps=react@18.2.0&react-dom@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0"; function App() { const [notification, setNotification] = useState({ type: "success", message: "" }); const [question, setQuestion] = useState(""); const [response, setResponse] = useState(""); const [isLoading, setIsLoading] = useState(false); const [copyStatus, setCopyStatus] = useState(""); const [isDarkMode, setIsDarkMode] = useState(() => { const savedTheme = localStorage.getItem("theme"); if (savedTheme) return savedTheme === "dark"; return window.matchMedia("(prefers-color-scheme: dark)").matches; }); const [isListening, setIsListening] = useState(false); const recognitionRef = useRef(null); useEffect(() => { const savedTheme = localStorage.getItem("theme"); if (savedTheme === "dark") { setIsDarkMode(true); document.documentElement.classList.add("dark"); } else { setIsDarkMode(false); document.documentElement.classList.remove("dark"); } // Initialize speech recognition const SpeechRecognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition || (window as any).mozSpeechRecognition || (window as any).msSpeechRecognition; if (SpeechRecognition) { const recognition = new SpeechRecognition(); recognition.continuous = false; recognition.interimResults = false; recognition.lang = "en-US"; recognition.onstart = () => { setIsListening(true); }; recognition.onresult = (event: any) => { const transcript = event.results[0][0].transcript; setQuestion(prevQuestion => prevQuestion + " " + transcript.trim()); }; recognition.onerror = (event: any) => { setIsListening(false); // Provide user-friendly error messages switch (event.error) { case "no-speech": displayNotification("No speech was detected. Please try again.", "warning"); break; case "audio-capture": displayNotification("No microphone was found. Ensure a microphone is connected.", "error"); break; case "not-allowed": displayNotification( "Speech recognition permission was denied. Please check your browser settings.", "error", ); break; default: displayNotification("An error occurred during speech recognition.", "error"); } }; recognition.onend = () => { setIsListening(false); }; recognitionRef.current = recognition; } else { displayNotification("Speech recognition not supported", "warning"); } }, []); const toggleTheme = () => { const newMode = !isDarkMode; setIsDarkMode(newMode); if (newMode) { document.documentElement.classList.add("dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.classList.remove("dark"); localStorage.setItem("theme", "light"); } }; const copyToClipboard = () => { navigator.clipboard.writeText(response).then(() => { displayNotification("Copied!", "success"); }).catch(err => { displayNotification("Failed to copy", "error"); }); }; const clearQuestion = () => { setQuestion(""); setResponse(""); }; const toggleSpeechRecognition = () => { if (!recognitionRef.current) { displayNotification("Speech recognition is not supported in this browser.", "error"); return; } try { if (isListening) { recognitionRef.current.stop(); } else { // Request microphone permissions navigator.mediaDevices.getUserMedia({ audio: true }) .then(() => { recognitionRef.current.start(); }) .catch((err) => { displayNotification("Microphone access was denied. Please check your browser settings.", "error"); }); } } catch (error) { displayNotification("An error occurred while trying to use speech recognition.", "error"); } }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); setResponse(""); setCopyStatus(""); try { const response = await fetch("/ask", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ question }), }); const data = await response.json(); setResponse(data.response); } catch (error) { setResponse(`Error: ${error instanceof Error ? error.message : "Unknown error"}`); displayNotification("Failed to get response", "error"); } finally { setIsLoading(false); } }; const displayNotification = (message: string, type: string) => { setNotification({ message, type }); }; const getNotificationColor = (type: string) => { let notificationColor = "bg-green-800"; if (type === "info") { notificationColor = "bg-blue-800"; } else if (type === "warning") { notificationColor = "bg-orange-600"; } else if (type === "error") { notificationColor = "bg-red-800"; } return notificationColor; }; return (

Reflective QA

{notification.message.length > 0 && (

{notification.message}

)}

setQuestion(e.target.value)}
              placeholder="Ask a question to be answered in a step by step reflective fashion by an AI assistant..."
              className="w-full p-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-green-500 text-sm sm:text-base 
                bg-white dark:bg-gray-700 
                text-gray-900 dark:text-gray-100 
                border-gray-300 dark:border-gray-600"
              rows={4}
              required
            />
            <div className="absolute top-2 right-2 flex items-center space-x-2">
              {question && (
                <button
                  type="button"
                  onClick={clearQuestion}
                  className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
                >
                  <XCircleIcon className="h-5 w-5" />
                </button>
              )}
              <button
                type="button"
                onClick={toggleSpeechRecognition}
                className={`text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 
                  ${isListening ? "text-red-500" : ""}`}
              >
                {isListening ? <StopIcon className="h-4 w-4" /> : <MicrophoneIcon className="h-4 w-4" />}
              </button>
            </div>
          </div>
          <button
            type="submit"
            disabled={isLoading}
            className="w-full bg-green-800 dark:bg-green-700 text-white py-2 rounded-full 
              hover:bg-green-900 dark:hover:bg-green-700 
              transition-colors disabled:opacity-50 text-sm sm:text-base"
          >
            {isLoading ? "Thinking..." : "Get Reflective Response"}
          </button>
        </form>

{response && (
          <div className="mt-4 p-2 sm:p-0">
            <div className="bg-blue-50 dark:bg-blue-900 p-3 rounded-md mb-2">
              <strong className="text-blue-800 dark:text-blue-200 text-sm sm:text-base">Your Question:</strong>
              <p className="text-blue-600 dark:text-blue-300 text-xs sm:text-sm">{question}</p>
            </div>
            <div className="p-4 bg-gray-50 dark:bg-gray-700 rounded-md relative">
              <div className="absolute top-2 right-2 flex items-center space-x-2">
                <button
                  onClick={copyToClipboard}
                  className="bg-blue-500 dark:bg-blue-600 text-white px-2 py-1 rounded text-xs hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors"
                >
                  {copyStatus || "Copy"}
                </button>
              </div>
              <strong className="block mb-2 text-gray-800 dark:text-gray-200 text-sm sm:text-base">
                AI Assistant Response:
              </strong>
              <pre className="whitespace-pre-wrap text-xs sm:text-sm text-gray-700 dark:text-gray-300 overflow-x-auto">{response}</pre>
            </div>
          </div>
        )}

<div className="mt-4 p-2 sm:p-0">
          <div className="bg-green-50 dark:bg-green-900 p-3 rounded-md mb-2">
            <strong className="text-green-800 dark:text-green-200 text-sm sm:text-base">Resources</strong>
            <ul className="list-inside list-disc hover:list-inside p-2 text-xs sm:text-sm">
              <li>
                <a
                  className="text-green-800 dark:text-green-300 break-words"
                  href="https://www.youtube.com/watch?v=3ifszZw6qG4"
                  target="_blank"
                >
                  Reflective AI (Q-Star/Strawberry) YouTube Intro
                </a>
              </li>
              <li>
                <a
                  className="text-green-800 dark:text-green-300 break-words"
                  href="https://huggingface.co/papers/2403.09629"
                  target="_blank"
                >
                  Reflective AI Q-Star Paper
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <a
        href={import.meta.url.replace("esm.town", "val.town")}
        target="_top"
        className="mt-4 text-xs sm:text-sm text-gray-500 dark:text-gray-400 hover:underline p-2 sm:p-0"
      >
        View Source
      </a>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  if (request.method === "POST" && new URL(request.url).pathname === "/ask") {
    try {
      const { question } = await request.json();

const { OpenAI } = await import("https://esm.town/v/std/openai");
      const openai = new OpenAI();

const completion = await openai.chat.completions.create({
        messages: [
          {
            role: "system",
            content:
              `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 <thinking> 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 <reflection> 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 </thinking>. 6. Provide your final answer in an <answer> 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 <thinking> and <reflection> MUST be tags and must be closed at their conclusion Make sure all <tags> are on separate lines with no other text. Do not include other text on a line containing a tag.`,
          },
          {
            role: "user",
            content: question,
          },
        ],
        model: "gpt-4o-mini",
        max_tokens: 1000,
      });

return new Response(
        JSON.stringify({
          response: completion.choices[0].message.content || "No response",
        }),
        {
          headers: { "Content-Type": "application/json" },
        },
      );
    } catch (error) {
      return new Response(
        JSON.stringify({
          response: `Error: ${error instanceof Error ? error.message : "Unknown error"}`,
        }),
        {
          status: 500,
          headers: { "Content-Type": "application/json" },
        },
      );
    }
  }

return new Response(
    `
    <html>
      <head>
        <title>AI Step-by-Step Assistant</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.tailwindcss.com"></script>
        <script src="https://esm.town/v/std/catch"></script>
        <script>
          tailwind.config = {
            darkMode: 'class'
          }
        </script>
      </head>
      <body>
        <div id="root"></div>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `,
    {
      headers: { "content-type": "text/html" },
    },
  );
}</article></body></html>

reflective_qa