Upload pages/index.js with huggingface_hub

pages/index.js

@@ -0,0 +1,211 @@
+import { useState, useEffect, useRef } from 'react'
+import ChatMessage from '../components/ChatMessage'
+import ChatInput from '../components/ChatInput'
+
+export default function Home() {
+  const [messages, setMessages] = useState([
+    {
+      id: 1,
+      role: 'assistant',
+      content: 'Hello! I\'m an AI assistant powered by Qwen Vision Language model. I can understand both text and images. You can upload images and ask me questions about them, or just chat with me! How can I help you today?',
+      timestamp: new Date().toISOString()
+    }
+  ])
+  const [isLoading, setIsLoading] = useState(false)
+  const [isTyping, setIsTyping] = useState(false)
+  const messagesEndRef = useRef(null)
+
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [messages])
+
+  const handleSendMessage = async (messageData) => {
+    const userMessage = {
+      id: Date.now(),
+      role: 'user',
+      content: messageData.content,
+      image: messageData.image,
+      timestamp: new Date().toISOString()
+    }
+
+    setMessages(prev => [...prev, userMessage])
+    setIsLoading(true)
+    setIsTyping(true)
+
+    try {
+      const response = await fetch('/api/chat', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          messages: [...messages, userMessage]
+        }),
+      })
+
+      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().toISOString()
+      }
+
+      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]') {
+              setIsTyping(false)
+              break
+            }
+
+            try {
+              const parsed = JSON.parse(data)
+              if (parsed.content) {
+                setMessages(prev => {
+                  const updated = [...prev]
+                  updated[updated.length - 1] = {
+                    ...updated[updated.length - 1],
+                    content: updated[updated.length - 1].content + parsed.content
+                  }
+                  return updated
+                })
+              } else if (parsed.error) {
+                throw new Error(parsed.error)
+              }
+            } catch (e) {
+              console.warn('Failed to parse chunk:', data)
+            }
+          }
+        }
+      }
+
+    } catch (error) {
+      console.error('Chat error:', error)
+      setMessages(prev => [...prev, {
+        id: Date.now() + 1,
+        role: 'assistant',
+        content: `Sorry, I encountered an error: ${error.message}. Please make sure your Hugging Face token is properly configured and try again.`,
+        timestamp: new Date().toISOString()
+      }])
+    } finally {
+      setIsLoading(false)
+      setIsTyping(false)
+    }
+  }
+
+  const clearChat = () => {
+    setMessages([
+      {
+        id: 1,
+        role: 'assistant',
+        content: 'Hello! I\'m an AI assistant powered by Qwen Vision Language model. I can understand both text and images. You can upload images and ask me questions about them, or just chat with me! How can I help you today?',
+        timestamp: new Date().toISOString()
+      }
+    ])
+  }
+
+  return (
+    <div className="min-h-screen flex flex-col bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
+      {/* Header */}
+      <header className="glass-effect border-b border-white border-opacity-20 p-4">
+        <div className="max-w-4xl mx-auto flex items-center justify-between">
+          <div>
+            <h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+              AI Vision Chat
+            </h1>
+            <p className="text-sm text-gray-400 mt-1">Powered by Qwen3-VL-8B-Instruct</p>
+          </div>
+          
+          <div className="flex items-center gap-4">
+            <button
+              onClick={clearChat}
+              className="px-4 py-2 text-sm bg-gray-700 bg-opacity-50 hover:bg-gray-600 rounded-lg transition-colors"
+              disabled={isLoading}
+            >
+              Clear Chat
+            </button>
+            
+            <a
+              href="https://huggingface.co/spaces/akhaliq/anycoder"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sm text-blue-400 hover:text-blue-300 transition-colors font-medium"
+            >
+              Built with anycoder
+            </a>
+          </div>
+        </div>
+      </header>
+
+      {/* Chat Messages */}
+      <div className="flex-1 overflow-hidden">
+        <div className="max-w-4xl mx-auto h-full px-4 py-6">
+          <div className="h-full overflow-y-auto pr-2 scroll-smooth">
+            <div className="space-y-6">
+              {messages.map((message, index) => (
+                <ChatMessage key={message.id} message={message} index={index} />
+              ))}
+              
+              {isTyping && (
+                <div className="flex gap-3 mb-6 animate-fade-in">
+                  <div className="flex-shrink-0">
+                    <div className="w-10 h-10 rounded-full flex items-center justify-center text-white font-semibold bg-gradient-to-r from-green-500 to-blue-500">
+                      AI
+                    </div>
+                  </div>
+                  <div className="chat-message assistant">
+                    <div className="flex items-center gap-2">
+                      <div className="flex gap-1">
+                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-pulse"></div>
+                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-pulse" style={{ animationDelay: '0.2s' }}></div>
+                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-pulse" style={{ animationDelay: '0.4s' }}></div>
+                      </div>
+                      <span className="text-xs text-gray-400">AI is typing...</span>
+                    </div>
+                  </div>
+                </div>
+              )}
+              
+              <div ref={messagesEndRef} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Input Area */}
+      <div className="max-w-4xl mx-auto w-full px-4 pb-6">
+        <ChatInput 
+          onSendMessage={handleSendMessage} 
+          disabled={isLoading || isTyping}
+        />
+        
+        <div className="mt-3 text-center">
+          <p className="text-xs text-gray-500">
+            Upload images to ask questions about them, or just chat! 
+            <span className="text-blue-400 ml-1">Powered by Hugging Face</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}