Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Complete Process Flow - BMS AI Assistant</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: Arial, sans-serif; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| background: white; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| .header { | |
| background: linear-gradient(135deg, #D01010 0%, #A00C0C 100%); | |
| color: white; | |
| padding: 30px; | |
| text-align: center; | |
| border-radius: 10px 10px 0 0; | |
| } | |
| .header h1 { | |
| font-size: 2em; | |
| margin-bottom: 10px; | |
| } | |
| .content { | |
| padding: 30px; | |
| } | |
| .flow-step { | |
| background: #f8f9fa; | |
| border-left: 5px solid #D01010; | |
| padding: 20px; | |
| margin: 15px 0; | |
| border-radius: 5px; | |
| } | |
| .flow-step h3 { | |
| color: #D01010; | |
| margin-bottom: 10px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .step-num { | |
| background: #D01010; | |
| color: white; | |
| width: 35px; | |
| height: 35px; | |
| border-radius: 50%; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| } | |
| .arrow { | |
| text-align: center; | |
| font-size: 2em; | |
| color: #D01010; | |
| margin: 10px 0; | |
| } | |
| .code { | |
| background: #2d2d2d; | |
| color: #f8f8f2; | |
| padding: 15px; | |
| border-radius: 5px; | |
| margin: 10px 0; | |
| font-family: monospace; | |
| font-size: 0.9em; | |
| overflow-x: auto; | |
| } | |
| .branch { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 10px; | |
| margin: 15px 0; | |
| } | |
| .branch-item { | |
| background: white; | |
| border: 2px solid #D01010; | |
| padding: 15px; | |
| text-align: center; | |
| border-radius: 5px; | |
| } | |
| .branch-item h4 { | |
| color: #D01010; | |
| margin-bottom: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>🔄 Complete Technical Process Flow</h1> | |
| <p>BMS AI Assistant - User to System to User</p> | |
| </div> | |
| <div class="content"> | |
| <div class="flow-step"> | |
| <h3><span class="step-num">1</span> User Input</h3> | |
| <p><strong>Component:</strong> Frontend UI (index.html)</p> | |
| <p><strong>Action:</strong> User types query in chat interface</p> | |
| <p><strong>Example:</strong> "What is the forecast for BMS0015 next month?"</p> | |
| <div class="code">userInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') sendMessage(); | |
| });</div> | |
| </div> | |
| <div class="arrow">↓</div> | |
| <div class="flow-step"> | |
| <h3><span class="step-num">2</span> Client Processing</h3> | |
| <p><strong>Component:</strong> JavaScript</p> | |
| <p><strong>Action:</strong> Validate input, display user message, prepare API call</p> | |
| <div class="code">const text = userInput.value.trim(); | |
| addMessage(text, 'user');</div> | |
| </div> | |
| <div class="arrow">↓</div> | |
| <div class="flow-step"> | |
| <h3><span class="step-num">3</span> HTTP POST Request</h3> | |
| <p><strong>Endpoint:</strong> /api/chat</p> | |
| <p><strong>Method:</strong> POST</p> | |
| <p><strong>Payload:</strong> {"message": "user query"}</p> | |
| <div class="code">fetch('/api/chat', { | |
| method: 'POST', | |
| headers: {'Content-Type': 'application/json'}, | |
| body: JSON.stringify({message: text}) | |
| });</div> | |
| </div> | |
| <div class="arrow">↓</div> | |
| <div class="flow-step"> | |
| <h3><span class="step-num">4</span> Server Receives Request</h3> | |
| <p><strong>Component:</strong> FastAPI (main.py)</p> | |
| <p><strong>Server:</strong> Uvicorn ASGI</p> | |
| <div class="code">@app.post("/api/chat") | |
| async def chat(request: ChatRequest): | |
| message = request.message</div> | |
| </div> | |
| <div class="arrow">↓</div> | |
| <div class="flow-step"> | |
| <h3><span class="step-num">5</span> Intent Parsing</h3> | |
| <p><strong>Component:</strong> intent_parser.py</p> | |
| <p><strong>Method:</strong> Regex pattern matching</p> | |
| <p><strong>Extracts:</strong> Intent, Item code, Quantity, Location, Horizon</p> | |
| <div class="code">parsed = parser.parse(message) | |
| # Returns: { | |
| # "intent": "demand_forecast", | |
| # "item_code": "BMS0015", | |
| # "horizon_days": 30 | |
| # }</div> | |
| </div> | |
| <div class="arrow">↓</div> | |
| <div class="flow-step"> | |
| <h3><span class="step-num">6</span> Intent Routing</h3> | |
| <p><strong>Decision Point:</strong> Route to appropriate handler</p> | |
| <div class="branch"> | |
| <div class="branch-item"> | |
| <h4>Forecast</h4> | |
| <p>forecasting.py</p> | |
| </div> | |
| <div class="branch-item"> | |
| <h4>Item Details</h4> | |
| <p>data_loader.py</p> | |
| </div> | |
| <div class="branch-item"> | |
| <h4>Inventory</h4> | |
| <p>data_loader.py</p> | |
| </div> | |
| <div class="branch-item"> | |
| <h4>Supplier</h4> | |
| <p>data_loader.py</p> | |
| </div> | |
| <div class="branch-item"> | |
| <h4>Requisition</h4> | |
| <p>data_loader.py</p> | |
| </div> | |
| <div class="branch-item"> | |
| <h4>Status</h4> | |
| <p>data_loader.py</p> | |
| </div> | |
| <div class="branch-item"> | |
| <h4>PDF</h4> | |
| <p>pdf_generator.py</p> | |
| </div> | |
| <div class="branch-item"> | |
| <h4>Chat</h4> | |
| <p>llm_engine.py</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="arrow">↓</div> | |
| <div class="flow-step"> | |
| <h3><span class="step-num">7</span> Business Logic Execution</h3> | |
| <p><strong>Example:</strong> Demand Forecast</p> | |
| <p>1. Load demand_history.csv<br> | |
| 2. Filter by item_code<br> | |
| 3. Fit ARIMA model<br> | |
| 4. Generate forecast<br> | |
| 5. Format as JSON</p> | |
| <div class="code">forecast_data = forecast_demand(item_code, horizon) | |
| # Returns: [{"date": "2025-01-01", "qty": 150}, ...]</div> | |
| </div> | |
| <div class="arrow">↓</div> | |
| <div class="flow-step"> | |
| <h3><span class="step-num">8</span> Data Retrieval</h3> | |
| <p><strong>Component:</strong> data_loader.py</p> | |
| <p><strong>Sources:</strong> items.csv, inventory.csv, suppliers.csv, etc.</p> | |
| <p><strong>Technology:</strong> Pandas DataFrames</p> | |
| <div class="code">item = loader.items_df[loader.items_df['item_code'] == 'BMS0015']</div> | |
| </div> | |
| <div class="arrow">↓</div> | |
| <div class="flow-step"> | |
| <h3><span class="step-num">9</span> LLM Processing (if needed)</h3> | |
| <p><strong>Component:</strong> llm_engine.py</p> | |
| <p><strong>Trigger:</strong> Only for general_chat intent</p> | |
| <p><strong>Model:</strong> TinyLlama 1.1B</p> | |
| <p><strong>Time:</strong> 5-15 seconds</p> | |
| <div class="code">response = llm.generate_response(query) | |
| # Uses company_context.txt for RAG</div> | |
| </div> | |
| <div class="arrow">↓</div> | |
| <div class="flow-step"> | |
| <h3><span class="step-num">10</span> Response Formatting</h3> | |
| <p><strong>Component:</strong> main.py</p> | |
| <p><strong>Format:</strong> JSON</p> | |
| <div class="code">return { | |
| "intent": "demand_forecast", | |
| "answer": "Forecast for BMS0015...", | |
| "forecast": [{"date": "2025-01-01", "qty": 150}] | |
| }</div> | |
| </div> | |
| <div class="arrow">↓</div> | |
| <div class="flow-step"> | |
| <h3><span class="step-num">11</span> HTTP Response</h3> | |
| <p><strong>Status:</strong> 200 OK</p> | |
| <p><strong>Content-Type:</strong> application/json</p> | |
| <p><strong>Sent to:</strong> Client browser</p> | |
| </div> | |
| <div class="arrow">↓</div> | |
| <div class="flow-step"> | |
| <h3><span class="step-num">12</span> Client Receives Response</h3> | |
| <p><strong>Component:</strong> JavaScript Fetch API</p> | |
| <p><strong>Action:</strong> Parse JSON response</p> | |
| <div class="code">const data = await response.json(); | |
| let botHtml = data.answer;</div> | |
| </div> | |
| <div class="arrow">↓</div> | |
| <div class="flow-step"> | |
| <h3><span class="step-num">13</span> UI Rendering</h3> | |
| <p><strong>Component:</strong> JavaScript DOM manipulation</p> | |
| <p><strong>Actions:</strong></p> | |
| <p>1. Create message bubble<br> | |
| 2. Add bot icon<br> | |
| 3. Render forecast table (if present)<br> | |
| 4. Add download button (if PDF)<br> | |
| 5. Scroll to bottom</p> | |
| <div class="code">addMessage(botHtml, 'bot', true); | |
| if (data.forecast) { | |
| botHtml += renderForecastTable(data.forecast); | |
| }</div> | |
| </div> | |
| <div class="arrow">↓</div> | |
| <div class="flow-step"> | |
| <h3><span class="step-num">14</span> User Sees Response</h3> | |
| <p><strong>Display:</strong> Chat bubble with bot icon</p> | |
| <p><strong>Features:</strong> Formatted text, tables, download links</p> | |
| <p><strong>Animation:</strong> Fade-in effect</p> | |
| <p><strong>Interaction:</strong> User can copy text, download PDFs, ask follow-up</p> | |
| </div> | |
| <div style="background: #e8f5e9; padding: 20px; border-radius: 5px; margin-top: 30px;"> | |
| <h3 style="color: #2e7d32; margin-bottom: 10px;">✅ Flow Complete</h3> | |
| <p><strong>Total Steps:</strong> 14</p> | |
| <p><strong>Average Time:</strong> 2-15 seconds (depending on intent)</p> | |
| <p><strong>Technologies Used:</strong> HTML/JS, FastAPI, Pandas, ARIMA, TinyLlama</p> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |