Spaces:

mghfuran
/

ZKnowledgeAgent

Sleeping

@@ -1,61 +1,157 @@
 import uvicorn
 from fastapi import FastAPI, Form
 from fastapi.responses import HTMLResponse
 from app.services.llm_service import ask_llm
 app = FastAPI()
 CHAT_HTML = """
 <html>
 <head>
-    <title>Z Logistics Virtual Agent</title>
     <style>
         body {
-            font-family: Arial;
-            background-color: #f4f4f4;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh;
         }
         .chat-container {
-            width: 500px;
             background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
         }
         .messages {
-            height: 300px;
             overflow-y: auto;
-            border: 1px solid #ddd;
-            padding: 10px;
-            margin-bottom: 10px;
         }
         .user {
-            color: blue;
-            margin-bottom: 10px;
         }
         .bot {
-            color: green;
-            margin-bottom: 10px;
         }
         input {
-            width: 75%;
-            padding: 10px;
         }
         button {
-            padding: 10px;
         }
     </style>
 </head>
 <body>
     <div class="chat-container">
-        <h2>ZTranAgent Chat</h2>
         <div class="messages" id="messages"></div>
-        <input type="text" id="messageInput" placeholder="Type message">
-        <button onclick="sendMessage()">Send</button>
     </div>
 <script>
 async function sendMessage() {
     let input = document.getElementById("messageInput");
@@ -64,29 +160,30 @@ async function sendMessage() {
     let messages = document.getElementById("messages");
     messages.innerHTML += `
-        <div class="user">
             <b>You:</b> ${message}
         </div>
     `;
     let response = await fetch('/api/chat', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/x-www-form-urlencoded'
         },
-        body: `message=${message}`
     });
     let data = await response.json();
-    // Fixed: Changed "ZBot" to "bot" to match your CSS class rules
     messages.innerHTML += `
-        <div class="bot">
             <b>Z:</b> ${data.response}
         </div>
     `;
-    input.value = "";
     messages.scrollTop = messages.scrollHeight;
 }
@@ -115,12 +212,11 @@ def chat_page():
 @app.post("/api/chat")
 def api_chat(message: str = Form(...)):
-    # Activated: Now using the real model response from your service
     bot_response = ask_llm(message)
     return {
         "response": bot_response
     }
-# Replace your original execution block at the bottom of main.py with this:
 if __name__ == "__main__":
     uvicorn.run("app.main:app", host="0.0.0.0", port=7860, reload=False)

 import uvicorn
 from fastapi import FastAPI, Form
 from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
 from app.services.llm_service import ask_llm
 app = FastAPI()
+# Mount the static directory to serve local image assets securely
+app.mount("/static", StaticFiles(directory="app/static"), name="static")
 CHAT_HTML = """
 <html>
 <head>
+    <title>Virtual Agent</title>
     <style>
         body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #f0f2f5;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 100vh;
+            margin: 0;
         }
         .chat-container {
+            width: 520px;
             background: white;
+            padding: 30px;
+            border-radius: 16px;
+            box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
+            display: flex;
+            flex-direction: column;
+        }
+        .brand-header {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            margin-bottom: 5px;
+        }
+        .logo-img {
+            width: 50px;
+            height: 50px;
+            object-fit: contain;
+            border-radius: 50%;
+        }
+        .brand-title {
+            font-size: 24px;
+            font-weight: 700;
+            color: #1e293b;
+            margin: 0;
+        }
+        .brand-description {
+            font-size: 13px;
+            color: #64748b;
+            margin: 0 0 20px 0;
+            line-height: 1.5;
+            border-bottom: 1px solid #e2e8f0;
+            padding-bottom: 15px;
         }
         .messages {
+            height: 330px;
             overflow-y: auto;
+            border: 1px solid #e2e8f0;
+            border-radius: 10px;
+            padding: 15px;
+            margin-bottom: 15px;
+            background-color: #fafafa;
+        }
+        .message-row {
+            margin-bottom: 12px;
+            line-height: 1.5;
+            font-size: 14px;
         }
         .user {
+            color: #1d4ed8;
         }
         .bot {
+            color: #047857;
+            background-color: #f0fdf4;
+            padding: 8px 12px;
+            border-radius: 8px;
+            border-left: 3px solid #10b981;
+        }
+        .input-group {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 15px;
         }
         input {
+            flex: 1;
+            padding: 12px;
+            border: 1px solid #cbd5e1;
+            border-radius: 8px;
+            font-size: 14px;
+            outline: none;
+            transition: border-color 0.2s;
+        }
+        input:focus {
+            border-color: #3b82f6;
         }
         button {
+            padding: 12px 24px;
+            background-color: #2563eb;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        button:hover {
+            background-color: #1d4ed8;
+        }
+        .chat-footer {
+            text-align: center;
+            font-size: 11px;
+            color: #94a3b8;
+            margin-top: 5px;
+            letter-spacing: 0.3px;
+        }
+        .chat-footer a {
+            color: #64748b;
+            text-decoration: none;
+            font-weight: 500;
+        }
+        .chat-footer a:hover {
+            text-decoration: underline;
+            color: #2563eb;
         }
     </style>
 </head>
 <body>
     <div class="chat-container">
+        <div class="brand-header">
+            <img class="logo-img" src="/static/Z_Logo_Circle.png" alt="Z Virtual Agent Logo">
+            <h2 class="brand-title">Virtual Agent</h2>
+        </div>
+        <p class="brand-description">
+            Intelligent automation and knowledge retrieval framework for Z Logistics operations. Ask questions regarding company SOPs, driver policies, onboarding protocols, and compliance directives.
+        </p>
         <div class="messages" id="messages"></div>
+        <div class="input-group">
+            <input type="text" id="messageInput" placeholder="Ask Z Virtual Agent...">
+            <button onclick="sendMessage()">Send</button>
+        </div>
+        <div class="chat-footer">
+            Powered by <b>Z Consulting</b> &bull; <a href="https://www.zedtex.us" target="_blank">www.zedtex.us</a>
+        </div>
     </div>
 <script>
 async function sendMessage() {
     let input = document.getElementById("messageInput");
     let messages = document.getElementById("messages");
     messages.innerHTML += `
+        <div class="message-row user">
             <b>You:</b> ${message}
         </div>
     `;
+    messages.scrollTop = messages.scrollHeight;
+    input.value = "";
     let response = await fetch('/api/chat', {
         method: 'POST',
         headers: {
             'Content-Type': 'application/x-www-form-urlencoded'
         },
+        body: `message=${encodeURIComponent(message)}`
     });
     let data = await response.json();
     messages.innerHTML += `
+        <div class="message-row bot">
             <b>Z:</b> ${data.response}
         </div>
     `;
     messages.scrollTop = messages.scrollHeight;
 }
 @app.post("/api/chat")
 def api_chat(message: str = Form(...)):
     bot_response = ask_llm(message)
     return {
         "response": bot_response
     }
 if __name__ == "__main__":
     uvicorn.run("app.main:app", host="0.0.0.0", port=7860, reload=False)

app/static/Z_Logo_Circle.png ADDED Viewed