Upload pages/index.js with huggingface_hub

pages/index.js

@@ -0,0 +1,257 @@
+import { useState, useRef, useEffect } from 'react'
+import ChatMessage from '../components/ChatMessage'
+import ImageUpload from '../components/ImageUpload'
+import { Send, Image as ImageIcon, Loader2 } from 'lucide-react'
+
+export default function Home() {
+  const [messages, setMessages] = useState([])
+  const [input, setInput] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [selectedImage, setSelectedImage] = useState(null)
+  const messagesEndRef = useRef(null)
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" })
+  }
+
+  useEffect(scrollToBottom, [messages])
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!input.trim() && !selectedImage) return
+
+    const userMessage = {
+      id: Date.now(),
+      role: 'user',
+      content: input.trim(),
+      image: selectedImage,
+      timestamp: new Date()
+    }
+
+    setMessages(prev => [...prev, userMessage])
+    setInput('')
+    setIsLoading(true)
+
+    // Prepare messages for API
+    const apiMessages = [...messages, userMessage].map(msg => {
+      const content = []
+      
+      if (msg.content) {
+        content.push({
+          type: 'text',
+          text: msg.content
+        })
+      }
+      
+      if (msg.image) {
+        content.push({
+          type: 'image_url',
+          image_url: {
+            url: msg.image
+          }
+        })
+      }
+      
+      return {
+        role: msg.role,
+        content: content.length > 1 ? content : (content[0]?.text || '')
+      }
+    })
+
+    try {
+      const response = await fetch('/api/chat', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          messages: apiMessages,
+          stream: true
+        }),
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const reader = response.body.getReader()
+      const decoder = new TextDecoder()
+      let assistantMessage = {
+        id: Date.now() + 1,
+        role: 'assistant',
+        content: '',
+        timestamp: new Date()
+      }
+
+      setMessages(prev => [...prev, assistantMessage])
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+
+        const chunk = decoder.decode(value)
+        const lines = chunk.split('\n')
+
+        for (const line of lines) {
+          if (line.startsWith('data: ')) {
+            const data = line.slice(6)
+            if (data === '[DONE]') return
+            
+            try {
+              const parsed = JSON.parse(data)
+              const delta = parsed.choices?.[0]?.delta?.content
+              if (delta) {
+                assistantMessage.content += delta
+                setMessages(prev => {
+                  const newMessages = [...prev]
+                  const lastIndex = newMessages.length - 1
+                  if (newMessages[lastIndex]?.id === assistantMessage.id) {
+                    newMessages[lastIndex] = { ...assistantMessage }
+                  }
+                  return newMessages
+                })
+              }
+            } catch (e) {
+              // Skip invalid JSON
+            }
+          }
+        }
+      }
+    } catch (error) {
+      console.error('Error:', error)
+      const errorMessage = {
+        id: Date.now() + 1,
+        role: 'assistant',
+        content: 'Sorry, there was an error processing your request.',
+        timestamp: new Date(),
+        isError: true
+      }
+      setMessages(prev => [...prev, errorMessage])
+    } finally {
+      setIsLoading(false)
+      setSelectedImage(null)
+    }
+  }
+
+  const clearChat = () => {
+    setMessages([])
+    setSelectedImage(null)
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
+      {/* Header */}
+      <header className="bg-white/80 backdrop-blur-sm border-b border-gray-200 sticky top-0 z-10">
+        <div className="max-w-4xl mx-auto px-4 py-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+                Multimodal Chat
+              </h1>
+              <p className="text-sm text-gray-600 mt-1">
+                Powered by Qwen3-VL-30B-A3B-Instruct
+              </p>
+            </div>
+            <div className="flex items-center gap-4">
+              {messages.length > 0 && (
+                <button
+                  onClick={clearChat}
+                  className="text-sm text-gray-500 hover:text-gray-700 px-3 py-1 rounded-md hover:bg-gray-100 transition-colors"
+                >
+                  Clear Chat
+                </button>
+              )}
+              <a
+                href="https://huggingface.co/spaces/akhaliq/anycoder"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-blue-600 hover:text-blue-700 hover:underline"
+              >
+                Built with anycoder
+              </a>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Chat Area */}
+      <main className="max-w-4xl mx-auto px-4 py-6">
+        <div className="bg-white/70 backdrop-blur-sm rounded-2xl shadow-xl border border-gray-200 min-h-[600px] flex flex-col">
+          {/* Messages */}
+          <div className="flex-1 overflow-y-auto p-6 space-y-4">
+            {messages.length === 0 ? (
+              <div className="text-center text-gray-500 mt-20">
+                <ImageIcon className="mx-auto mb-4 w-12 h-12 text-gray-400" />
+                <h3 className="text-lg font-medium mb-2">Start a conversation</h3>
+                <p className="text-sm">
+                  Send a message or upload an image to begin chatting with the AI
+                </p>
+              </div>
+            ) : (
+              messages.map((message) => (
+                <ChatMessage key={message.id} message={message} />
+              ))
+            )}
+            {isLoading && (
+              <div className="flex items-center gap-2 text-gray-500 p-4">
+                <Loader2 className="w-4 h-4 animate-spin" />
+                <span>AI is thinking...</span>
+              </div>
+            )}
+            <div ref={messagesEndRef} />
+          </div>
+
+          {/* Input Area */}
+          <div className="border-t border-gray-200 p-4">
+            {selectedImage && (
+              <div className="mb-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
+                <div className="flex items-center justify-between">
+                  <img
+                    src={selectedImage}
+                    alt="Selected"
+                    className="w-16 h-16 object-cover rounded-lg"
+                  />
+                  <button
+                    onClick={() => setSelectedImage(null)}
+                    className="text-red-500 hover:text-red-700 p-1"
+                  >
+                    ✕
+                  </button>
+                </div>
+              </div>
+            )}
+            
+            <form onSubmit={handleSubmit} className="flex items-end gap-3">
+              <div className="flex-1">
+                <textarea
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  placeholder="Type your message... (or ask about an image)"
+                  className="w-full p-3 border border-gray-300 rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                  rows="1"
+                  style={{ minHeight: '48px', maxHeight: '120px' }}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' && !e.shiftKey) {
+                      e.preventDefault()
+                      handleSubmit(e)
+                    }
+                  }}
+                />
+              </div>
+              
+              <ImageUpload onImageSelect={setSelectedImage} />
+              
+              <button
+                type="submit"
+                disabled={(!input.trim() && !selectedImage) || isLoading}
+                className="bg-blue-600 hover:bg-blue-700 disabled:bg-gray-300 text-white p-3 rounded-lg transition-colors flex items-center justify-center"
+              >
+                <Send className="w-5 h-5" />
+              </button>
+            </form>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}