Hugging Face's logo

Spaces:
enviro-edu-chatbot
/
Chatbot_AI
Runtime error

App Files Community
Syuhra Ganiswari commited on
Commit
f86ad4d
·
1 Parent(s): 85f4d1b

add landing page (index.html), update CSS and app.py

Browse files
Files changed (4) hide show
  1. app.py +10 -0
  2. static/style.css +44 -0
  3. templates/chat.html +4 -4
  4. templates/index.html +36 -0
app.py CHANGED
@@ -42,8 +42,18 @@ except Exception as e:
42
  print(f"❌ GAGAL terhubung ke ChromaDB. Pastikan server chroma run... berjalan. Error: {e}")
43
 
44
  # --- 3. Endpoint Frontend ---
 
 
 
 
45
  @app.route("/")
46
  def home():
 
 
 
 
 
 
47
  return render_template("chat.html")
48
 
49
  # --- 4. Endpoint API - Ambil SEMUA History (untuk F5) ---
 
42
  print(f"❌ GAGAL terhubung ke ChromaDB. Pastikan server chroma run... berjalan. Error: {e}")
43
 
44
  # --- 3. Endpoint Frontend ---
45
+ # @app.route("/")
46
+ # def home():
47
+ # return render_template("chat.html")
48
+
49
  @app.route("/")
50
  def home():
51
+ """Sajikan landing page (index.html)"""
52
+ return render_template("index.html")
53
+
54
+ @app.route("/chat")
55
+ def chat_page():
56
+ """Sajikan halaman chat utama (chat.html)"""
57
  return render_template("chat.html")
58
 
59
  # --- 4. Endpoint API - Ambil SEMUA History (untuk F5) ---
static/style.css CHANGED
@@ -5,15 +5,59 @@
5
  box-sizing: border-box;
6
  }
7
 
 
8
  body {
9
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
10
  background-color: #f7f7f8;
11
  color: #1f2328;
 
 
 
 
 
 
 
 
12
  display: flex;
13
  height: 100vh;
14
  overflow: hidden; /* Mencegah body scroll */
15
  }
16
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  /* --- 1. Sidebar (Kiri) --- */
18
  .sidebar {
19
  width: 260px;
 
5
  box-sizing: border-box;
6
  }
7
 
8
+ /* 1. STYLE BODY UNIVERSAL (Dasar) */
9
  body {
10
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
11
  background-color: #f7f7f8;
12
  color: #1f2328;
13
+ /* display: flex; */
14
+ /* height: 100vh; */
15
+ /* overflow: hidden; Mencegah body scroll */
16
+ }
17
+
18
+ /* 2. STYLE BODY KHUSUS UNTUK CHAT PAGE */
19
+ /* Selektor ini memastikan style hanya berlaku jika body BUKAN landing-page */
20
+ body:not(.landing-page) {
21
  display: flex;
22
  height: 100vh;
23
  overflow: hidden; /* Mencegah body scroll */
24
  }
25
 
26
+ /* --- 3. STYLE UNTUK LANDING PAGE (index.html) --- */
27
+
28
+ .landing-page { /* Menggunakan class yang ditambahkan di index.html */
29
+ display: flex;
30
+ align-items: center;
31
+ justify-content: center;
32
+ text-align: center;
33
+ height: 100vh;
34
+ }
35
+
36
+ .landing-container {
37
+ max-width: 600px;
38
+ padding: 20px;
39
+ }
40
+ .landing-container h1 {
41
+ font-size: 2.5em;
42
+ margin-bottom: 20px;
43
+ }
44
+ .landing-container p {
45
+ font-size: 1.2em;
46
+ margin-bottom: 30px;
47
+ color: #555;
48
+ }
49
+ .start-chat-btn {
50
+ display: inline-block;
51
+ padding: 15px 30px;
52
+ background-color: #4a4aef;
53
+ color: white;
54
+ text-decoration: none;
55
+ font-size: 1.1em;
56
+ font-weight: bold;
57
+ border-radius: 8px;
58
+ /* Tambahkan hover atau style lain yang Anda suka */
59
+ }
60
+
61
  /* --- 1. Sidebar (Kiri) --- */
62
  .sidebar {
63
  width: 260px;
templates/chat.html CHANGED
@@ -10,9 +10,9 @@
10
  </head>
11
  <body>
12
 
13
- <div class="upgrade-tab">
14
  <i class="fa-solid fa-star"></i> Upgrade to Pro
15
- </div>
16
 
17
  <nav class="sidebar">
18
 
@@ -34,14 +34,14 @@
34
  </ul>
35
  </div>
36
 
37
- <div class="sidebar-footer">
38
  <ul>
39
  <li><i class="fa-solid fa-cog"></i> Settings</li>
40
  <li>
41
  <div class="avatar">AN</div> Andrew Neilson
42
  </li>
43
  </ul>
44
- </div>
45
  </nav>
46
 
47
  <section class="chat-area">
 
10
  </head>
11
  <body>
12
 
13
+ <!-- <div class="upgrade-tab">
14
  <i class="fa-solid fa-star"></i> Upgrade to Pro
15
+ </div> -->
16
 
17
  <nav class="sidebar">
18
 
 
34
  </ul>
35
  </div>
36
 
37
+ <!-- <div class="sidebar-footer">
38
  <ul>
39
  <li><i class="fa-solid fa-cog"></i> Settings</li>
40
  <li>
41
  <div class="avatar">AN</div> Andrew Neilson
42
  </li>
43
  </ul>
44
+ </div> -->
45
  </nav>
46
 
47
  <section class="chat-area">
templates/index.html ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="id">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Enviro Education Chatbot</title>
7
+ <link rel="stylesheet" href="/static/style.css">
8
+ <!-- <style>
9
+ /* CSS sederhana khusus untuk halaman ini */
10
+ body { display: flex; align-items: center; justify-content: center; text-align: center; }
11
+ .landing-container { max-width: 600px; padding: 20px; }
12
+ .landing-container h1 { font-size: 2.5em; margin-bottom: 20px; }
13
+ .landing-container p { font-size: 1.2em; margin-bottom: 30px; color: #555; }
14
+ .start-chat-btn {
15
+ display: inline-block;
16
+ padding: 15px 30px;
17
+ background-color: #4a4aef;
18
+ color: white;
19
+ text-decoration: none;
20
+ font-size: 1.1em;
21
+ font-weight: bold;
22
+ border-radius: 8px;
23
+ }
24
+ </style> -->
25
+ </head>
26
+ <body class="landing-page">
27
+ <div class="landing-container">
28
+ <h1>Selamat Datang di Enviro Education Chatbot</h1>
29
+ <p>
30
+ Asisten AI ini dilatih berdasarkan data produk kami.
31
+ Tanyakan apa saja tentang Air, Water, dan Soil Quality Testers.
32
+ </p>
33
+ <a href="/chat" class="start-chat-btn">Mulai Chat Sekarang</a>
34
+ </div>
35
+ </body>
36
+ </html>