Spaces:

Ferrxni
/

Gaia_Mistral

Paused

App Files Files Community

Clément Simon commited on Feb 27

Commit

eb89bee

•

1 Parent(s): c03a978

feat: refactoring HTML/CSS/JS

Browse files

Files changed (5) hide show

app.py +71 -33
static/layout.html +31 -0
static/script.js +9 -0
static/style.css +19 -0
user_location.json +1 -1

app.py CHANGED Viewed

@@ -5,7 +5,7 @@ from pathlib import Path
 import plotly.graph_objects as go
 import uvicorn
 from dotenv import load_dotenv
-from fastapi import FastAPI, Depends
 from fastapi.staticfiles import StaticFiles
 from mistralai.client import ChatMessage, MistralClient
 from pydantic import BaseModel
@@ -13,6 +13,8 @@ import json
 from fastapi.responses import HTMLResponse, RedirectResponse, Response
 from datetime import date
 from weather import get_weather
 # code that gives the date of today
 today = date.today()
@@ -42,9 +44,8 @@ static_dir.mkdir(parents=True, exist_ok=True)
 # mount FastAPI StaticFiles server
 app.mount("/static", StaticFiles(directory=static_dir), name="static")
-# Gradio stuff
@@ -153,16 +154,6 @@ async def set_user_location(user_location: UserLocation):
 user_profile = load_user_profile()
 weather=load_weather()
-### BACKEND ###
-@app.get("/meteo")
-async def read_meteo(location: str, date: str):
-    # API call to get the weather
-    pass
 @app.get("/", response_class=HTMLResponse)
 async def enter_location():
     return """
@@ -192,8 +183,11 @@ async def enter_location():
     """
 # Home page : using the user profile, display the weather and chat with Mistral AI
 @app.get("/home", response_class=HTMLResponse)
-async def home(user_profile: UserProfile = Depends(load_user_profile), weather: Weather = Depends(load_weather)):
     with open('user_location.json', 'r') as f:
         user_location = json.load(f)
@@ -220,23 +214,67 @@ async def home(user_profile: UserProfile = Depends(load_user_profile), weather:
     map_file = static_dir / "map.html"
     fig.write_html(str(map_file))
     # display the map
-    map_html = f'<iframe src="/static/map.html" width="100%" height="500px"></iframe>'
     return f"""
-        <center>
-        <h1>Bienvenue !</h1></center>
-        <div style="display: flex;">
-            <div style="flex: 50%;">
-                <h2>Informations du jour</h2>
-                <p>temperature: {temperature}</p>
-                <p>weather: {weather}</p>
-                <h2>Map</h2>
-                {map_html}
-            </div>
-            <div style="flex: 50%;">
-                <h2>Avez-vous une question ?</h2>
-                <textarea style="width: 100%; height: 500px;"></textarea>
             </div>
         </div>
-        """

 import plotly.graph_objects as go
 import uvicorn
 from dotenv import load_dotenv
+from fastapi import FastAPI, Depends, Request
 from fastapi.staticfiles import StaticFiles
 from mistralai.client import ChatMessage, MistralClient
 from pydantic import BaseModel
 from fastapi.responses import HTMLResponse, RedirectResponse, Response
 from datetime import date
 from weather import get_weather
+from fastapi.templating import Jinja2Templates
 # code that gives the date of today
 today = date.today()
 # mount FastAPI StaticFiles server
 app.mount("/static", StaticFiles(directory=static_dir), name="static")
+# templating
+templates = Jinja2Templates(directory="static")
 user_profile = load_user_profile()
 weather=load_weather()
 @app.get("/", response_class=HTMLResponse)
 async def enter_location():
     return """
     """
 # Home page : using the user profile, display the weather and chat with Mistral AI
 @app.get("/home", response_class=HTMLResponse)
+async def home(
+    request: Request,
+    user_profile: UserProfile = Depends(load_user_profile),
+    weather: Weather = Depends(load_weather),
+):
     with open('user_location.json', 'r') as f:
         user_location = json.load(f)
     map_file = static_dir / "map.html"
     fig.write_html(str(map_file))
     # display the map
+    map_html = f'<iframe src="/static/map.html" width="100%" height="100%" ></iframe>'
+    return templates.TemplateResponse("layout.html", {"request": request, "user_profile": user_profile, "weather": weather, "map_html": map_html})
     return f"""
+    <html>
+    <head>
+        <title>{title}</title>
+    </head>
+    <body>
+        <div id="leftMenu" class="side-menu">
+            <ul id="Profile">
+                <li>Name: {user_profile.name}</li>
+                <li>Age: {user_profile.age}</li>
+                <li>Location: {user_profile.location}</li>
+            </ul>
+            <button id="toggleMenu">Toggle Menu</button>
+        </div>
+        <div id="rightProfile" class="side-menu">
+            <div id="menu">
+                <h1>{title}</h1>
+                <p>{description}</p>
+                <input type="text" id="user_input" placeholder="{placeholder}">
+                <button onclick="sendChat()">Send</button>
+                <ul id="chat"></ul>
             </div>
+            <button id="toggleProfile">Toggle Profile</button>
+        </div>
+        <div id="map">
+            {map_html}
         </div>
+        <script>
+            function sendChat() {{
+                var user_input = document.getElementById("user_input").value;
+                var chat = document.getElementById("chat");
+                var user_message = document.createElement("li");
+                user_message.appendChild(document.createTextNode(user_input));
+                chat.appendChild(user_message);
+                document.getElementById("user_input").value = "";
+                fetch('/chat', {{
+                    method: 'POST',
+                    headers: {{
+                        'Content-Type': 'application/json',
+                    }},
+                    body: JSON.stringify({{
+                        user_input: user_input
+                    }}),
+                }})
+                .then(response => response.json())
+                .then(data => {{
+                    var mistral_message = document.createElement("li");
+                    mistral_message.appendChild(document.createTextNode(data.mistral_response));
+                    chat.appendChild(mistral_message);
+                }});
+            }}
+        </script>
+    </body>
+    </html>
+    """

static/layout.html ADDED Viewed

	@@ -0,0 +1,31 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>FastAPI Home</title>
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <div id="leftMenu" class="side-menu">
+        <ul id="Profile">
+            <li>Name: {{ user_profile.name }}</li>
+            <li>Age: {{ user_profile.age }}</li>
+            <li>Location: {{ user_profile.location }}</li>
+        </ul>
+        <button id="toggleMenu">Toggle Menu</button>
+    </div>
+    <div id="mainContent">
+        <!-- Main content here -->
+        <div id="map">
+            {{ map_html | safe }}
+        </div>
+    </div>
+    <div id="rightProfile" class="side-menu">
+        <!-- Profile content here -->
+        <button id="toggleProfile">Toggle Profile</button>
+    </div>
+    <script src="/static/script.js"></script>
+</body>
+</html>

static/script.js ADDED Viewed

	@@ -0,0 +1,9 @@

+document.getElementById('toggleMenu').addEventListener('click', function () {
+    var menu = document.getElementById('leftMenu');
+    menu.classList.toggle('hidden');
+});
+document.getElementById('toggleProfile').addEventListener('click', function () {
+    var profile = document.getElementById('rightProfile');
+    profile.classList.toggle('hidden');
+});

static/style.css ADDED Viewed

	@@ -0,0 +1,19 @@

+.side-menu {
+    width: 200px; /* Fixed width */
+    position: fixed;
+    top: 0;
+    overflow: auto;
+    height: 100%;
+  }
+  #leftMenu {
+    left: 0;
+  }
+  #rightProfile {
+    right: 0;
+  }
+  .hidden {
+    display: none;
+  }

user_location.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"city": "~~Gif-sur-Yvette~~"}


1	+ {"city": "Clamart"}