Upload 7 files

.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+.next
+.git
+.env

Dockerfile

@@ -0,0 +1,40 @@
+# Use an official Node.js runtime as a parent image
+FROM node:21
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Install Python and pip
+RUN apt-get update && apt-get install -y \
+    python3 \
+    python3-pip \
+    && rm -rf /var/lib/apt/lists/* \
+    && pip3 install --no-cache-dir --upgrade pip  # Upgrade pip to the latest version
+
+# Copy package.json
+COPY package.json ./
+
+# Install frontend dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Install backend dependencies
+RUN pip3 install --no-cache-dir -r requirements.txt
+
+# Build the Next.js app
+RUN npm run build
+
+# Make port 8000 available to the world outside this container
+EXPOSE 8000
+
+# Set execute permissions for the start script
+RUN chmod +x start.sh
+
+# Use a non-root user
+RUN useradd -m appuser
+USER appuser
+
+# Run the script when the container launches
+CMD ["./start.sh"]

app.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import React, { useState, useEffect, useRef } from 'react'
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Card, CardContent } from "@/components/ui/card"
+import { ChevronDown, ChevronUp, Send } from 'lucide-react'
+
+export default function AIChat() {
+  const [messages, setMessages] = useState([])
+  const [input, setInput] = useState('')
+  const [apiKey, setApiKey] = useState('')
+  const [thinking, setThinking] = useState('')
+  const [isThinkingVisible, setIsThinkingVisible] = useState(false)
+  const chatEndRef = useRef(null)
+
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: 'smooth' })
+  }, [messages])
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!input.trim()) return
+
+    const newMessage = { role: 'user', content: input }
+    setMessages([...messages, newMessage])
+    setInput('')
+
+    try {
+      // Call /think endpoint
+      const thinkResponse = await fetch('/think', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ messages: [...messages, newMessage], api_key: apiKey }),
+      })
+
+      if (!thinkResponse.ok) throw new Error('Think request failed')
+
+      const reader = thinkResponse.body.getReader()
+      let thinkingContent = ''
+
+      while (true) {
+        const { done, value } = await reader.read()
+        if (done) break
+        const chunk = new TextDecoder().decode(value)
+        thinkingContent += chunk
+        setThinking(thinkingContent)
+      }
+
+      // Call /chat endpoint with the thinking result
+      const chatResponse = await fetch('/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ messages: [...messages, newMessage, { role: 'assistant', content: thinkingContent }], api_key: apiKey }),
+      })
+
+      if (!chatResponse.ok) throw new Error('Chat request failed')
+
+      const chatReader = chatResponse.body.getReader()
+      let chatContent = ''
+
+      while (true) {
+        const { done, value } = await chatReader.read()
+        if (done) break
+        const chunk = new TextDecoder().decode(value)
+        chatContent += chunk
+        setMessages(prev => [...prev.slice(0, -1), { role: 'assistant', content: chatContent }])
+      }
+    } catch (error) {
+      console.error('Error:', error)
+      setMessages(prev => [...prev, { role: 'assistant', content: 'An error occurred. Please try again.' }])
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white p-4 flex flex-col">
+      <Card className="flex-grow overflow-auto mb-4 bg-gray-800 bg-opacity-50 backdrop-filter backdrop-blur-lg">
+        <CardContent className="p-4">
+          {messages.map((message, index) => (
+            <div key={index} className={`mb-4 ${message.role === 'user' ? 'text-right' : 'text-left'}`}>
+              <div className={`inline-block p-2 rounded-lg ${message.role === 'user' ? 'bg-blue-600' : 'bg-gray-700'}`}>
+                {message.content}
+              </div>
+              {message.role === 'assistant' && thinking && (
+                <div className="mt-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setIsThinkingVisible(!isThinkingVisible)}
+                    className="text-xs text-gray-400"
+                  >
+                    {isThinkingVisible ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                    Thinking Process
+                  </Button>
+                  {isThinkingVisible && (
+                    <div className="mt-2 text-xs text-gray-400 bg-gray-800 p-2 rounded">
+                      {thinking.split('\n').map((line, i) => {
+                        if (line.startsWith('<thinking>') || line.startsWith('<step>')) {
+                          return <p key={i}>{line.replace(/<\/?thinking>|<\/?step>/g, '')}</p>
+                        }
+                        return null
+                      })}
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+          <div ref={chatEndRef} />
+        </CardContent>
+      </Card>
+      <form onSubmit={handleSubmit} className="flex gap-2">
+        <Input
+          type="text"
+          value={apiKey}
+          onChange={(e) => setApiKey(e.target.value)}
+          placeholder="Enter API Key (optional)"
+          className="flex-grow bg-gray-800 text-white"
+        />
+        <Textarea
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Type your message..."
+          className="flex-grow bg-gray-800 text-white"
+        />
+        <Button type="submit" className="bg-blue-600 hover:bg-blue-700">
+          <Send className="h-4 w-4" />
+        </Button>
+      </form>
+    </div>
+  )
+}

main.py

@@ -0,0 +1,84 @@
+import os
+from fastapi import FastAPI, HTTPException
+from fastapi.responses import StreamingResponse
+from pydantic import BaseModel
+from typing import List, Dict
+import google.generativeai as genai
+from google.generativeai.types import HarmBlockThreshold, HarmCategory
+from dotenv import load_dotenv
+
+load_dotenv()
+
+app = FastAPI()
+
+class ChatMessage(BaseModel):
+    role: str
+    content: str
+
+class ChatRequest(BaseModel):
+    messages: List[ChatMessage]
+    api_key: str = None
+
+chat_history = []
+
+async def stream_response(response):
+    for chunk in response:
+        yield chunk.text
+
+@app.post("/think")
+async def think(request: ChatRequest):
+    api_key = request.api_key or os.getenv("GOOGLE_API_KEY")
+    if not api_key:
+        raise HTTPException(status_code=400, detail="API key is required")
+
+    genai.configure(api_key=api_key)
+    model = genai.GenerativeModel(
+        model_name="gemini-1.5-flash",
+        generation_config={
+            "temperature": 1,
+            "max_output_tokens": 8192,
+            "response_mime_type": "application/json",
+        },
+        safety_settings={
+            HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT: HarmBlockThreshold.BLOCK_NONE,
+            HarmCategory.HARM_CATEGORY_HARASSMENT: HarmBlockThreshold.BLOCK_NONE,
+            HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT: HarmBlockThreshold.BLOCK_NONE,
+            HarmCategory.HARM_CATEGORY_HATE_SPEECH: HarmBlockThreshold.BLOCK_NONE
+        },
+        system_instruction="You are a helpful AI assistant. Analyze the user's request and provide your thoughts in XML tags. Use <thinking> for overall analysis, <step> for individual steps, and <count> for remaining steps."
+    )
+
+    messages = [{"role": m.role, "parts": [m.content]} for m in request.messages]
+    response = await model.generate_content_async(messages, stream=True)
+    return StreamingResponse(stream_response(response), media_type="text/plain")
+
+@app.post("/chat")
+async def chat(request: ChatRequest):
+    api_key = request.api_key or os.getenv("GOOGLE_API_KEY")
+    if not api_key:
+        raise HTTPException(status_code=400, detail="API key is required")
+
+    genai.configure(api_key=api_key)
+    model = genai.GenerativeModel(
+        model_name="gemini-1.5-flash",
+        generation_config={
+            "temperature": 1,
+            "max_output_tokens": 8192,
+            "response_mime_type": "application/json",
+        },
+        safety_settings={
+            HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT: HarmBlockThreshold.BLOCK_NONE,
+            HarmCategory.HARM_CATEGORY_HARASSMENT: HarmBlockThreshold.BLOCK_NONE,
+            HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT: HarmBlockThreshold.BLOCK_NONE,
+            HarmCategory.HARM_CATEGORY_HATE_SPEECH: HarmBlockThreshold.BLOCK_NONE
+        },
+        system_instruction="You are a helpful AI assistant. Provide a concise summary of the thinking process and give a final answer."
+    )
+
+    messages = [{"role": m.role, "parts": [m.content]} for m in request.messages]
+    response = await model.generate_content_async(messages, stream=True)
+    return StreamingResponse(stream_response(response), media_type="text/plain")
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

package.json

@@ -0,0 +1,33 @@
+{
+    "name": "ai-chat",
+    "version": "1.0.0",
+    "private": true,
+    "scripts": {
+      "dev": "next dev",
+      "build": "next build",
+      "start": "next start",
+      "lint": "next lint"
+    },
+    "dependencies": {
+      "next": "13.4.19",
+      "react": "18.2.0",
+      "react-dom": "18.2.0",
+      "@radix-ui/react-slot": "^1.0.2",
+      "class-variance-authority": "^0.7.0",
+      "clsx": "^2.0.0",
+      "lucide-react": "^0.263.1",
+      "tailwind-merge": "^1.14.0",
+      "tailwindcss-animate": "^1.0.6"
+    },
+    "devDependencies": {
+      "@types/node": "20.5.7",
+      "@types/react": "18.2.21",
+      "@types/react-dom": "18.2.7",
+      "autoprefixer": "10.4.15",
+      "eslint": "8.48.0",
+      "eslint-config-next": "13.4.19",
+      "postcss": "8.4.29",
+      "tailwindcss": "3.3.3",
+      "typescript": "5.2.2"
+    }
+  }

requirements.txt

@@ -0,0 +1,4 @@
+fastapi
+uvicorn
+google-generativeai
+python-dotenv

start.sh

@@ -0,0 +1,14 @@
+#!/bin/bash
+set -e
+
+# Start the Next.js application
+npm start &
+
+# Start the FastAPI backend
+uvicorn main:app --host 0.0.0.0 --port 8000
+
+# Wait for any process to exit
+wait -n
+
+# Exit with status of process that exited first
+exit $?