Spaces:

minchyeom
/

llmOS-Agent

Runtime error

tech-envision commited on Jun 10

Commit

6ebba8f

1 Parent(s): 2a103fa

Add CORS and modernize frontend

Files changed (4) hide show

api_app/__init__.py CHANGED Viewed

@@ -3,6 +3,7 @@ from __future__ import annotations
 from fastapi import FastAPI, UploadFile, File, Form
 from fastapi.responses import StreamingResponse
 from fastapi import HTTPException
 from pydantic import BaseModel
 import asyncio
 import os
@@ -26,6 +27,14 @@ class ChatRequest(BaseModel):
 def create_app() -> FastAPI:
     app = FastAPI(title="LLM Backend API")
     @app.post("/chat/stream")
     async def chat_stream(req: ChatRequest):
         async def stream() -> asyncio.AsyncIterator[str]:

 from fastapi import FastAPI, UploadFile, File, Form
 from fastapi.responses import StreamingResponse
 from fastapi import HTTPException
+from fastapi.middleware.cors import CORSMiddleware
 from pydantic import BaseModel
 import asyncio
 import os
 def create_app() -> FastAPI:
     app = FastAPI(title="LLM Backend API")
+    app.add_middleware(
+        CORSMiddleware,
+        allow_origins=["*"],
+        allow_credentials=True,
+        allow_methods=["*"],
+        allow_headers=["*"],
+    )
     @app.post("/chat/stream")
     async def chat_stream(req: ChatRequest):
         async def stream() -> asyncio.AsyncIterator[str]:

frontend/index.html CHANGED Viewed

@@ -3,6 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>LLM Chat</title>
   </head>

   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>LLM Chat</title>
   </head>

frontend/src/index.css CHANGED Viewed

@@ -1,8 +1,9 @@
 :root {
-  --glass-bg: rgba(255, 255, 255, 0.2);
-  --glass-border: rgba(255, 255, 255, 0.4);
   --blur: 16px;
   --radius: 20px;
 }
 * {
@@ -12,7 +13,7 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   background: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
   display: flex;
   justify-content: center;
@@ -31,6 +32,8 @@ body::after {
   background: radial-gradient(circle at center, rgba(255, 255, 255, 0.5), transparent);
   filter: blur(100px);
   z-index: 0;
 }
 body::before {

 :root {
+  --glass-bg: rgba(255, 255, 255, 0.15);
+  --glass-border: rgba(255, 255, 255, 0.35);
   --blur: 16px;
   --radius: 20px;
+  --glare: radial-gradient(circle at top left, rgba(255, 255, 255, 0.6), transparent);
 }
 * {
 body {
   margin: 0;
   padding: 0;
+  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
   background: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
   display: flex;
   justify-content: center;
   background: radial-gradient(circle at center, rgba(255, 255, 255, 0.5), transparent);
   filter: blur(100px);
   z-index: 0;
+  mix-blend-mode: overlay;
+  opacity: 0.6;
 }
 body::before {

frontend/src/styles/chat.css CHANGED Viewed

@@ -11,6 +11,17 @@
   border-radius: var(--radius);
   padding: 1rem;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
 }
 .message-list {
@@ -20,6 +31,7 @@
   flex-direction: column;
   gap: 0.5rem;
   padding-right: 4px;
 }
 .session-list {
@@ -38,6 +50,7 @@
   backdrop-filter: blur(var(--blur));
   -webkit-backdrop-filter: blur(var(--blur));
   font-size: 0.75rem;
 }
 .session-item.active {
@@ -54,7 +67,7 @@
   border-radius: var(--radius);
   backdrop-filter: blur(var(--blur));
   -webkit-backdrop-filter: blur(var(--blur));
-  animation: jelly 0.6s ease;
 }
 .message.user {
@@ -87,7 +100,7 @@
   color: #000;
   font-weight: bold;
   cursor: pointer;
-  transition: transform 0.2s;
 }
 .username-form {
@@ -119,7 +132,7 @@
   background: rgba(255, 255, 255, 0.7);
   font-weight: bold;
   cursor: pointer;
-  transition: transform 0.2s;
 }
 .username-form button:hover {
@@ -146,7 +159,7 @@
     transform: scale(1.05);
   }
   60% {
-    transform: scale(0.98);
   }
   100% {
     transform: scale(1);

   border-radius: var(--radius);
   padding: 1rem;
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden;
+}
+.chat-container::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--glare);
+  mix-blend-mode: overlay;
+  pointer-events: none;
 }
 .message-list {
   flex-direction: column;
   gap: 0.5rem;
   padding-right: 4px;
+  scroll-behavior: smooth;
 }
 .session-list {
   backdrop-filter: blur(var(--blur));
   -webkit-backdrop-filter: blur(var(--blur));
   font-size: 0.75rem;
+  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 .session-item.active {
   border-radius: var(--radius);
   backdrop-filter: blur(var(--blur));
   -webkit-backdrop-filter: blur(var(--blur));
+  animation: jelly 0.6s cubic-bezier(0.22, 1, 0.36, 1);
 }
 .message.user {
   color: #000;
   font-weight: bold;
   cursor: pointer;
+  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 .username-form {
   background: rgba(255, 255, 255, 0.7);
   font-weight: bold;
   cursor: pointer;
+  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
 }
 .username-form button:hover {
     transform: scale(1.05);
   }
   60% {
+    transform: scale(0.97);
   }
   100% {
     transform: scale(1);