Hugging Face's logo

Spaces:
mikao007
/
LLM_webSystem
Running

App Files Community
mikao007 commited on
Commit
9026b7c
Β·
verified Β·
1 Parent(s): 67ce4fb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +152 -19
index.html CHANGED
@@ -1,19 +1,152 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-TW">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>LLM+ Web scraping Application</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ display: flex;
11
+ height: 100vh;
12
+ margin: 0;
13
+ flex-direction: column;
14
+ background-color: #f4f4f9;
15
+ }
16
+
17
+ .header {
18
+ text-align: center;
19
+ padding: 20px;
20
+ background-color: #fff;
21
+ border-bottom: 2px solid #ddd;
22
+ }
23
+
24
+ .header h1 {
25
+ margin: 0;
26
+ font-size: 2.5em;
27
+ color: #333;
28
+ }
29
+
30
+ .header h2 {
31
+ margin: 5px 0 0;
32
+ font-size: 1em;
33
+ color: #777;
34
+ }
35
+
36
+ .container {
37
+ display: flex;
38
+ flex-grow: 1;
39
+ }
40
+
41
+ .sidebar {
42
+ width: 250px;
43
+ background-color: #333;
44
+ color: white;
45
+ padding: 20px;
46
+ box-shadow: 2px 0 5px rgba(0,0,0,0.1);
47
+ }
48
+
49
+ .sidebar ul {
50
+ list-style-type: none;
51
+ padding: 0;
52
+ }
53
+
54
+ .sidebar li {
55
+ margin-bottom: 10px;
56
+ }
57
+
58
+ .sidebar button {
59
+ background-color: #555;
60
+ color: white;
61
+ border: none;
62
+ padding: 15px;
63
+ text-align: left;
64
+ width: 100%;
65
+ font-size: 1.1em;
66
+ cursor: pointer;
67
+ transition: background-color 0.3s ease;
68
+ }
69
+
70
+ .sidebar button:hover, .sidebar button.active {
71
+ background-color: #007bff;
72
+ }
73
+
74
+ .content {
75
+ flex-grow: 1;
76
+ padding: 20px;
77
+ display: flex;
78
+ justify-content: center;
79
+ align-items: center;
80
+ background-color: #e9ecef;
81
+ }
82
+
83
+ .iframe-container {
84
+ display: none;
85
+ width: 100%;
86
+ height: 100%;
87
+ max-width: 850px;
88
+ max-height: 450px;
89
+ border: 2px solid #ccc;
90
+ border-radius: 8px;
91
+ overflow: hidden;
92
+ background-color: #fff;
93
+ }
94
+
95
+ .iframe-container.active {
96
+ display: block;
97
+ }
98
+
99
+ iframe {
100
+ width: 100%;
101
+ height: 100%;
102
+ border: none;
103
+ }
104
+ </style>
105
+ </head>
106
+ <body>
107
+ <div class="header">
108
+ <h1>LLM+ Web scraping Application</h1>
109
+ <h2>cj huang@2025copyright</h2>
110
+ </div>
111
+
112
+ <div class="container">
113
+ <div class="sidebar">
114
+ <ul>
115
+ <li><button onclick="showIframe('iframe01')" class="active">ESG 爬蟲</button></li>
116
+ <li><button onclick="showIframe('iframe02')">ε€šζ¨‘ζ…‹ API 應用</button></li>
117
+ </ul>
118
+ </div>
119
+ <div class="content">
120
+ <div id="iframe01" class="iframe-container active">
121
+ <iframe src="https://cjian2025-0824-demo.hf.space" frameborder="0"></iframe>
122
+ </div>
123
+ <div id="iframe02" class="iframe-container">
124
+ <iframe src="https://cjian2025-groq-api-gradio.hf.space" frameborder="0"></iframe>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <script>
130
+ function showIframe(iframeId) {
131
+ // ιš±θ—ζ‰€ζœ‰ iframe
132
+ const iframes = document.querySelectorAll('.iframe-container');
133
+ iframes.forEach(iframe => {
134
+ iframe.classList.remove('active');
135
+ });
136
+
137
+ // ι‘―η€Ίι»žζ“Šηš„ iframe
138
+ const activeIframe = document.getElementById(iframeId);
139
+ activeIframe.classList.add('active');
140
+
141
+ // η§»ι™€ζ‰€ζœ‰ζŒ‰ιˆ•ηš„ active η‹€ζ…‹
142
+ const buttons = document.querySelectorAll('.sidebar button');
143
+ buttons.forEach(button => {
144
+ button.classList.remove('active');
145
+ });
146
+
147
+ // η‚Ίθ’«ι»žζ“Šηš„ζŒ‰ιˆ•ζ·»εŠ  active η‹€ζ…‹
148
+ event.currentTarget.classList.add('active');
149
+ }
150
+ </script>
151
+ </body>
152
+ </html>