| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>GeminiGuard Backend Docs</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%); |
| } |
| .code-block { |
| font-family: 'Courier New', monospace; |
| background-color: #1E293B; |
| border-radius: 0.5rem; |
| } |
| .endpoint-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100"> |
| <div class="gradient-bg text-white py-16 px-4 sm:px-6 lg:px-8"> |
| <div class="max-w-7xl mx-auto text-center"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">GeminiGuard Support Backend</h1> |
| <p class="text-xl md:text-2xl mb-8">Powering AI customer support with Gemini, FastAPI & Redis</p> |
| <div class="flex justify-center space-x-4"> |
| <a href="#endpoints" class="px-6 py-3 bg-white text-blue-600 rounded-lg font-semibold hover:bg-gray-100 transition">API Endpoints</a> |
| <a href="#setup" class="px-6 py-3 bg-blue-800 text-white rounded-lg font-semibold hover:bg-blue-900 transition">Setup Guide</a> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> |
| <div id="endpoints" class="mb-16"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-8">API Endpoints</h2> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| <div class="endpoint-card bg-white rounded-xl shadow-md p-6 transition duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-blue-100 p-2 rounded-full mr-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800">Real-time Chat</h3> |
| </div> |
| <div class="mb-4"> |
| <span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded font-mono">WebSocket</span> |
| <span class="inline-block ml-2 bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded font-mono">/chat/stream</span> |
| </div> |
| <p class="text-gray-600 mb-4">Stream AI responses using Gemini API with RAG from FAISS vectors.</p> |
| <div class="code-block p-4 text-white mb-4"> |
| <code>{ |
| "type": "user_message", |
| "content": "How do I reset my password?" |
| }</code> |
| </div> |
| </div> |
|
|
| |
| <div class="endpoint-card bg-white rounded-xl shadow-md p-6 transition duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-green-100 p-2 rounded-full mr-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800">FAQ Upload</h3> |
| </div> |
| <div class="mb-4"> |
| <span class="inline-block bg-green-100 text-green-800 text-xs px-2 py-1 rounded font-mono">POST</span> |
| <span class="inline-block ml-2 bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded font-mono">/faq/upload</span> |
| </div> |
| <p class="text-gray-600 mb-4">Upload CSV/Markdown files to generate embeddings for RAG pipeline.</p> |
| <div class="code-block p-4 text-white mb-4"> |
| <code>curl -X POST -F "file=@faqs.csv" http://localhost:8000/faq/upload</code> |
| </div> |
| </div> |
|
|
| |
| <div class="endpoint-card bg-white rounded-xl shadow-md p-6 transition duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-red-100 p-2 rounded-full mr-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800">Escalation</h3> |
| </div> |
| <div class="mb-4"> |
| <span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded font-mono">POST</span> |
| <span class="inline-block ml-2 bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded font-mono">/escalate</span> |
| </div> |
| <p class="text-gray-600 mb-4">Create support tickets stored in PostgreSQL with optional SendGrid email.</p> |
| <div class="code-block p-4 text-white mb-4"> |
| <code>{ |
| "issue": "Payment failed", |
| "description": "Card declined despite sufficient funds", |
| "customer_email": "user@example.com" |
| }</code> |
| </div> |
| </div> |
|
|
| |
| <div class="endpoint-card bg-white rounded-xl shadow-md p-6 transition duration-300"> |
| <div class="flex items-center mb-4"> |
| <div class="bg-purple-100 p-2 rounded-full mr-4"> |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /> |
| </svg> |
| </div> |
| <h3 class="text-xl font-semibold text-gray-800">Escalation List</h3> |
| </div> |
| <div class="mb-4"> |
| <span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded font-mono">GET</span> |
| <span class="inline-block ml-2 bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded font-mono">/escalate/list</span> |
| </div> |
| <p class="text-gray-600 mb-4">Retrieve all support tickets with filtering options.</p> |
| <div class="code-block p-4 text-white mb-4"> |
| <code>[ |
| { |
| "id": 1, |
| "status": "open", |
| "created_at": "2023-07-15T09:30:00Z", |
| "customer_email": "user@example.com" |
| } |
| ]</code> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div id="setup" class="mb-16"> |
| <h2 class="text-3xl font-bold text-gray-800 mb-8">Setup Guide</h2> |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> |
| <div class="p-6"> |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Environment Variables</h3> |
| <div class="code-block p-4 text-white mb-6"> |
| <code>GEMINI_API_KEY=your_gemini_key |
| REDIS_URL=redis://default:password@localhost:6379 |
| POSTGRES_URL=postgresql://user:password@localhost:5432/supportdb |
| SENDGRID_KEY=your_sendgrid_key |
| CORS_ORIGINS=https://your-frontend.vercel.app,http://localhost:3000</code> |
| </div> |
|
|
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Running with Docker</h3> |
| <div class="code-block p-4 text-white mb-6"> |
| <code># Build the image |
| docker build -t geminiguard-backend . |
|
|
| # Run the container |
| docker run -p 8000:8000 --env-file .env geminiguard-backend</code> |
| </div> |
|
|
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Directory Structure</h3> |
| <div class="code-block p-4 text-white"> |
| <code>backend/ |
| ├── main.py # FastAPI app entrypoint |
| ├── routes/ # API endpoint definitions |
| │ ├── chat.py # WebSocket chat endpoint |
| │ ├── faq.py # FAQ upload endpoint |
| │ └── escalate.py # Ticket endpoints |
| ├── services/ # Business logic |
| │ ├── gemini_service.py # Gemini API calls |
| │ └── faiss_service.py # FAISS vector operations |
| ├── models/ # Pydantic models |
| ├── database/ # DB connections |
| ├── requirements.txt # Python dependencies |
| └── Dockerfile # Container configuration</code> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="text-center py-8"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-4">Ready to Deploy?</h3> |
| <p class="text-gray-600 mb-6">This backend is production-ready for Railway deployment with all required endpoints.</p> |
| <a href="#" class="inline-block px-8 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition">Download Complete Code</a> |
| </div> |
| </div> |
|
|
| <footer class="gradient-bg text-white py-8"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <p>© 2023 GeminiGuard Support Backend. All rights reserved.</p> |
| </div> |
| </footer> |
| </body> |
| </html> |
|
|
