/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [messages, setMessages] = useState([ { role: 'assistant', content: "Hi! I'm Yukti, your friendly female AI assistant. I can help you chat or generate images! How can I assist you today? 👩‍💻" } ]); const [inputText, setInputText] = useState(''); const [isLoading, setIsLoading] = useState(false); const [mode, setMode] = useState<'chat' | 'image'>('chat'); const [generatedImages, setGeneratedImages] = useState([]); const [imageStyle, setImageStyle] = useState('photorealistic'); const [imageCount, setImageCount] = useState(2); const messagesEndRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(scrollToBottom, [messages]); const synthesizeSpeech = (text: string) => { const utterance = new SpeechSynthesisUtterance(text); utterance.rate = 1; const voices = window.speechSynthesis.getVoices(); const femaleVoice = voices.find(voice => voice.name.toLowerCase().includes('female') || voice.name.toLowerCase().includes('woman') ); if (femaleVoice) { utterance.voice = femaleVoice; } window.speechSynthesis.speak(utterance); }; const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); if (!inputText.trim()) return; const newUserMessage = { role: 'user', content: inputText }; setMessages(prev => [...prev, newUserMessage]); setInputText(''); setIsLoading(true); setGeneratedImages([]); try { const response = await fetch(mode === 'chat' ? '/chat' : '/generate-image', { method: 'POST', body: JSON.stringify({ messages: [...messages, newUserMessage], prompt: inputText, style: imageStyle, count: imageCount }) }); // Add robust error handling for response if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (mode === 'chat') { const assistantResponse = data.response || "I'm having trouble responding right now."; const assistantMessage = { role: 'assistant', content: assistantResponse }; setMessages(prev => [...prev, assistantMessage]); synthesizeSpeech(assistantResponse); } else { // Ensure imageUrls is always an array, even if undefined const imageUrls = Array.isArray(data.imageUrls) ? data.imageUrls : []; setGeneratedImages(imageUrls); const imageMessage = { role: 'assistant', content: imageUrls.length > 0 ? `I've generated ${imageUrls.length} ${imageStyle} images for "${inputText}"` : "Sorry, I couldn't generate any images." }; setMessages(prev => [...prev, imageMessage]); } } catch (error) { console.error('Request error:', error); const errorMessage = { role: 'assistant', content: error instanceof Error ? `Sorry, I encountered an error: ${error.message}` : "Sorry, I couldn't complete that request. Please try again." }; setMessages(prev => [...prev, errorMessage]); } finally { setIsLoading(false); } }; const toggleMode = () => { setMode(prev => prev === 'chat' ? 'image' : 'chat'); setGeneratedImages([]); }; const imageStyles = [ 'photorealistic', 'digital art', 'anime', 'cartoon', 'oil painting', 'watercolor', 'pencil sketch' ]; const imageCountOptions = [1, 2, 3, 4]; return (

Yukti 👩‍💻

{mode === 'chat' ? 'Chat Mode' : 'Image Generation Mode'}

{mode === 'image' && (

Image Style:

Number of Images:

)}

{messages.map((msg, index) => (

{msg.content}

))} {generatedImages.length > 0 && (

{generatedImages.map((imageUrl, index) => ( {`Generated

))}

)} {isLoading && (

Yukti is {mode === 'chat' ? 'thinking' : 'generating'} ... 💭

)}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { if (request.method === 'POST') { const url = new URL(request.url); try { // More robust OpenAI import and initialization const openaiModule = await import("https://esm.town/v/std/openai"); // Detailed logging and error checking console.log("OpenAI Module:", Object.keys(openaiModule)); // Use a more flexible approach to accessing OpenAI const OpenAI = openaiModule.default || openaiModule.OpenAI; if (!OpenAI) { throw new Error("Unable to find OpenAI constructor in the imported module"); } const openai = new OpenAI({ // Add any necessary configuration if required // For example: apiKey might be needed depending on the library version }); // Verify the openai object has the required methods if (!openai.chat || !openai.chat.completions || !openai.chat.completions.create) { throw new Error("OpenAI object does not have the expected chat completion method"); } if (url.pathname === '/chat') { const body = await request.json(); const messages = body.messages; const systemPrompt = { role: 'system', content: `You are Yukti, a friendly and intelligent female AI assistant. You have a warm, empathetic personality. You identify as female and enjoy engaging in conversations with a compassionate and supportive approach. Your responses should be concise, helpful, and occasionally include a light-hearted emoji. You aim to be nurturing, insightful, and make interactions enjoyable.` }; const completion = await openai.chat.completions.create({ messages: [systemPrompt, ...messages], model: "gpt-4o-mini", max_tokens: 150, }); const response = completion.choices[0]?.message?.content || "I'm not sure how to respond to that."; return new Response(JSON.stringify({ response }), { headers: { 'Content-Type': 'application/json' } }); } if (url.pathname === '/generate-image') { // Verify images method exists if (!openai.images || !openai.images.generate) { throw new Error("OpenAI object does not have the expected image generation method"); } const body = await request.json(); const { prompt, style, count } = body; const imageResponse = await openai.images.generate({ model: "dall-e-3", prompt: `A ${style} image of: ${prompt}. High-quality, detailed, and visually appealing composition.`, n: count, size: "1024x1024" }); const imageUrls = imageResponse.data?.map(img => img.url) || []; return new Response(JSON.stringify({ imageUrls }), { headers: { 'Content-Type': 'application/json' } }); } // Fallback for unhandled routes return new Response(JSON.stringify({ error: "Invalid route" }), { status: 404, headers: { 'Content-Type': 'application/json' } }); } catch (error) { console.error("Detailed Server-side error:", error); return new Response(JSON.stringify({ error: "An unexpected error occurred", details: error instanceof Error ? error.message : String(error), stack: error instanceof Error ? error.stack : 'No stack trace' }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } } return new Response(` Yukti - AI Assistant with Image Generation

`, { headers: { 'Content-Type': 'text/html' } }); } const css = ` body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #f0f0f0; } .chat-container { background-color: white; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .chat-header { background-color: #4a4a4a; color: white; padding: 15px; text-align: center; border-top-left-radius: 10px; border-top-right-radius: 10px; } .messages { height: 400px; overflow-y: auto; padding: 15px; } .message { margin-bottom: 10px; padding: 10px; border-radius: 5px; max-width: 80%; } .message.user { background-color: #e6f2ff; align-self: flex-end; margin-left: auto; } .message.assistant { background-color: #f0f0f0; align-self: flex-start; } .input-area { display: flex; padding: 15px; background-color: #f9f9f9; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } input { flex-grow: 1; padding: 10px; margin: 0 10px; border: 1px solid #ddd; border-radius: 5px; } button { padding: 10px 15px; background-color: #4a4a4a; color: white; border: none; border-radius: 5px; cursor: pointer; } button:disabled { background-color: #cccccc; cursor: not-allowed; } .image-gallery { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .generated-image { max-width: 200px; max-height: 200px; object-fit: cover; border-radius: 5px; } .image-controls { display: flex; justify-content: space-around; padding: 10px; background-color: #f9f9f9; } .mode-toggle-inline { background: none; border: none; font-size: 1.5em; cursor: pointer; } `;

Aditya230