lhg99 commited on
Commit
41661fd
1 Parent(s): 8ca0bb6
Files changed (1) hide show
  1. README.md +13 -506
README.md CHANGED
@@ -1,506 +1,13 @@
1
- # **Gradio-Demo**
2
-
3
- ## - **Gradio**
4
- [<img src="readme_files/gradio.svg" alt="gradio" width=300>](https://gradio.app)<br>
5
- Here's the gradio github link: https://github.com/gradio-app/gradio
6
-
7
- Gradio is open-source python library. It can make demo for machine learning model.
8
-
9
- ### Gradio is useful for:
10
-
11
- - **Demoing** your machine learning models for clients/collaborators/users/students.
12
-
13
- - **Deploying** your models quickly with automatic shareable links and getting feedback on model performance.
14
-
15
- - **Debugging** your model interactively during development using built-in manipulation and interpretation tools.
16
-
17
- We can use various components for making demos.
18
-
19
- This project provides demo for people who want to use gradio library.
20
-
21
- ## - **Demo Description**
22
-
23
- This demo shows 2022 year weather in table and graph by selecting the month, day, weather elements, and location.
24
-
25
- ### **Input components**
26
-
27
- Month, day : dropbox<br>
28
- weather elements : checkboxGroup<br>
29
- location : radio<br>
30
- precipitation : checkbox
31
-
32
- Precipitation data has few valid data, so we made a separate component without drawing a graph.
33
-
34
- ### **Output components**
35
-
36
- Weather table : dataframe<br>
37
- Weather graph : plots
38
-
39
- We used pandas and matplotlib python library when we make dataframe and plots.
40
-
41
- Humidity is represented by a bar graph and other weather elements are represented by a curved line graphs.
42
-
43
- ### **Function**
44
-
45
- In demo, we made two functions which names are dataSearch and showOutput.
46
-
47
- - dataSearch()
48
-
49
- This function provides obtaining data about the month, day, weather element, and location entered by the user.
50
-
51
- The columns in the csv file are composed of location, date, time, percipitation, wind, humidity, air pressure, and temperature. We took csv files from weather data opening portal.
52
-
53
- ```python
54
- def dataSearch(month, day, weather_elements, location, precipitation):
55
- if location=='Seoul':
56
- df = pd.read_csv('Seoul.csv')
57
- elif location=='Washington':
58
- df = pd.read_csv('Washington.csv')
59
-
60
- if precipitation:
61
- weather_elements.append('precipitation')
62
-
63
- if day in ['1','2','3','4','5','6','7','8','9']:
64
- today = '2022-'+month +'-0'+day
65
- else:
66
- today = '2022-'+month+'-'+day
67
-
68
- df1 = df[df.date == today]
69
- columns = ['location', 'date', 'time'] + weather_elements
70
- df2 = df1.loc[:, columns]
71
-
72
- return df2
73
- ```
74
-
75
- - showOutput()
76
-
77
- This function represents data obtained from dataSearch() by dataframe and graphs.
78
-
79
- It replaced month with numeric form and the maximum number of plots increased to 2 depending on the weather elements selected.
80
-
81
- ```python
82
- def showOutput(month, day, weather_elements, location, precipitation):
83
- if month=='January':
84
- month = '01'
85
- elif month=='February':
86
- month = '02'
87
- elif month=='March':
88
- month = '03'
89
- elif month=='April':
90
- month = '04'
91
- elif month=='May':
92
- month = '05'
93
- elif month=='June':
94
- month = '06'
95
- elif month=='July':
96
- month = '07'
97
- elif month=='August':
98
- month = '08'
99
- elif month=='September':
100
- month = '09'
101
- elif month=='October':
102
- month = '10'
103
- elif month=='November':
104
- month = '11'
105
- elif month=='December':
106
- month = '12'
107
-
108
- weatherTable = dataSearch(month, day, weather_elements, location, precipitation)
109
-
110
- if precipitation:
111
- weather_elements.remove('precipitation')
112
-
113
- if day in ['1','2','3','4','5','6','7','8','9']:
114
- xname = '2022-'+month +'-0'+day
115
- else:
116
- xname = '2022-'+month+'-'+day
117
-
118
- y_value=[0]*len(weather_elements)
119
-
120
- for i in range(len(weather_elements)):
121
- y_value[i] = weatherTable[weather_elements[i]]
122
-
123
- x_value = weatherTable['time']
124
-
125
- if 'humidity' in weather_elements:
126
- humidity_index = weather_elements.index('humidity')
127
- if weather_elements[humidity_index] != weather_elements[-1]:
128
- temp = weather_elements[humidity_index]
129
- weather_elements[humidity_index] = weather_elements[-1]
130
- weather_elements[-1] = temp
131
-
132
-
133
- if len(weather_elements) == 1:
134
- weatherPlot = plt.figure(figsize=(10,10))
135
- plt.title("2022 Weather Graph", fontsize=20, fontweight='bold')
136
- plt.xlabel(xname,labelpad=5, fontsize=15)
137
- plt.ylabel(weather_elements[0], labelpad=15, fontsize=15)
138
- plt.xticks(size=10, rotation=45)
139
-
140
- plt.bar(x_value, y_value[-1], color='skyblue', label='1st data')
141
- plt.legend(loc = "upper left")
142
-
143
- elif len(weather_elements) == 2:
144
- weatherPlot, ax1 = plt.subplots(figsize=(10,10))
145
- plt.title("2022 Weather Graph", fontsize=20, fontweight='bold')
146
- plt.xticks(size=10, rotation=45)
147
-
148
- ax1.bar(x_value, y_value[-1], color='skyblue', label='1st data')
149
- ax1.set_xlabel(xname, labelpad=5, fontsize=15)
150
- ax1.set_ylabel(weather_elements[1], labelpad=15, fontsize=15)
151
- ax1.legend(loc='upper left')
152
-
153
- ax1_sub = ax1.twinx()
154
- ax1_sub.plot(x_value, y_value[0], color='red', marker = "o", label='2nd data')
155
- ax1_sub.set_ylabel(weather_elements[0], labelpad=25, fontsize=15, rotation=270)
156
- ax1_sub.legend(loc='upper right')
157
-
158
- elif len(weather_elements) == 3:
159
- weatherPlot, (ax1, ax2) = plt.subplots(2, 1, figsize=(10,15), constrained_layout=True)
160
-
161
- line1 = ax1.plot(x_value, y_value[0], color='red', marker = "o", label='1st data')
162
- ax1.set_xlabel(xname, labelpad=5, fontsize=15)
163
- ax1.set_ylabel(weather_elements[0], labelpad=15, fontsize=15)
164
- ax1.set_title("2022 Weather Graph", fontsize=20, fontweight='bold')
165
- ax1.tick_params(axis='x', rotation=45, labelsize=10)
166
-
167
- ax1_sub = ax1.twinx()
168
- line2 = ax1_sub.plot(x_value, y_value[1], color='blue', marker = "o", label='2nd data')
169
- ax1_sub.set_ylabel(weather_elements[1], labelpad=25, fontsize=15, rotation=270)
170
-
171
- lines = line1 + line2
172
- labels = [l.get_label() for l in lines]
173
- ax1.legend(lines, labels, loc='upper left')
174
-
175
- ax2.bar(x_value, y_value[-1], color='skyblue', label='3rd data')
176
- ax2.set_xlabel(xname, labelpad=5, fontsize=15)
177
- ax2.set_ylabel(weather_elements[-1], labelpad=15, fontsize=15)
178
- ax2.tick_params(axis='x', rotation=45, labelsize=10)
179
- ax2.legend(loc='upper right')
180
-
181
- elif len(weather_elements) == 4:
182
- weatherPlot, (ax1, ax2) = plt.subplots(2,1, figsize=(10,15), constrained_layout=True)
183
-
184
- line1 = ax1.plot(x_value, y_value[0], color='red', marker = "o", label='1st data')
185
- ax1.set_xlabel(xname, labelpad=5, fontsize=15)
186
- ax1.set_ylabel(weather_elements[0], labelpad=15, fontsize=15)
187
- ax1.set_title("2022 Weather Graph", fontsize=20, fontweight='bold')
188
- ax1.tick_params(axis='x', rotation=45, labelsize=10)
189
-
190
- ax1_sub = ax1.twinx()
191
- line2 = ax1_sub.plot(x_value, y_value[1], color='blue', marker = "o", label='2nd data')
192
- ax1_sub.set_ylabel(weather_elements[1], labelpad=25, fontsize=15, rotation=270)
193
-
194
- lines = line1 + line2
195
- labels = [l.get_label() for l in lines]
196
- ax1.legend(lines, labels, loc='upper left')
197
-
198
- ax2.bar(x_value, y_value[-1], color='skyblue', label='3rd data')
199
- ax2.set_xlabel(xname, labelpad=5, fontsize=15)
200
- ax2.set_ylabel(weather_elements[-1], labelpad=15, fontsize=15)
201
- ax2.tick_params(axis='x', rotation=45, labelsize=10)
202
- ax2.legend(loc='upper left')
203
-
204
- ax2_sub = ax2.twinx()
205
- ax2_sub.plot(x_value, y_value[2], color='gray', marker = "o", label='4th data')
206
- ax2_sub.set_ylabel(weather_elements[2], labelpad=25, fontsize=15, rotation=270)
207
- ax2_sub.legend(loc='upper right')
208
-
209
-
210
- else:
211
- if len(weather_elements) == 1:
212
- weatherPlot = plt.figure(figsize=(10,10))
213
- plt.title("2022 Weather Graph", fontsize=20, fontweight='bold')
214
- plt.xlabel(xname,labelpad=5, fontsize=15)
215
- plt.ylabel(weather_elements[0], labelpad=15, fontsize=15)
216
- plt.xticks(size=10, rotation=45)
217
- plt.plot(x_value, y_value[0], color='red', marker='o', label='1st data')
218
- plt.legend(loc = "upper left")
219
-
220
- elif len(weather_elements) == 2:
221
- weatherPlot, ax1 = plt.subplots(figsize=(10,10))
222
- plt.title("2022 Weather Graph", fontsize=20, fontweight='bold')
223
- plt.xticks(size=10, rotation=45)
224
-
225
- line1 = ax1.plot(x_value, y_value[0], color='red', marker='o', label='1st data')
226
- ax1.set_xlabel(xname, labelpad=5, fontsize=15)
227
- ax1.set_ylabel(weather_elements[0], labelpad=15, fontsize=15)
228
-
229
- ax1_sub = ax1.twinx()
230
- line2 = ax1_sub.plot(x_value, y_value[1], color='skyblue', marker='o', label='2nd data')
231
- ax1_sub.set_ylabel(weather_elements[1], labelpad=25, fontsize=15, rotation=270)
232
-
233
- lines = line1 + line2
234
- labels = [l.get_label() for l in lines]
235
- ax1.legend(lines, labels, loc='upper left')
236
-
237
- elif len(weather_elements) == 3:
238
- weatherPlot, (ax1, ax2) = plt.subplots(2,1, figsize=(10,15), constrained_layout=True)
239
-
240
- line1 = ax1.plot(x_value, y_value[0], color='red', marker = "o", label='1st data')
241
- ax1.set_xlabel(xname, labelpad=5, fontsize=15)
242
- ax1.set_ylabel(weather_elements[0], labelpad=15, fontsize=15)
243
- ax1.set_title("2022 Weather Graph", fontsize=20, fontweight='bold')
244
- ax1.tick_params(axis='x', rotation=45, labelsize=10)
245
-
246
- ax1_sub = ax1.twinx()
247
- line2 = ax1_sub.plot(x_value, y_value[1], color='skyblue', marker = "o", label='2nd data')
248
- ax1_sub.set_ylabel(weather_elements[1], labelpad=25, fontsize=15, rotation=270)
249
-
250
- lines = line1 + line2
251
- labels = [l.get_label() for l in lines]
252
- ax1.legend(lines, labels, loc='upper left')
253
-
254
- ax2.plot(x_value, y_value[2], color='gray', marker = "o", label='3rd data')
255
- ax2.set_xlabel(xname, labelpad=5, fontsize=15)
256
- ax2.set_ylabel(weather_elements[2], labelpad=15, fontsize=15)
257
- ax2.tick_params(axis='x', rotation=45, labelsize=10)
258
- ax2.legend(loc='upper left')
259
-
260
- return [weatherTable, weatherPlot]
261
- ```
262
- ## - Demo Usage
263
-
264
- Before you implement demo, you have to install gradio, pandas, and matplotlib library.
265
-
266
- ```bash
267
- pip install gradio pandas matplotlib
268
- ```
269
-
270
- Run the code below as a Python script or in a Jupyter Notebook or google colab.
271
-
272
- We provided demo code as a .ipynb file.
273
-
274
- ```python
275
- import gradio as gr
276
- import pandas as pd
277
- import matplotlib.pyplot as plt
278
-
279
- # search weather data that is in csv file
280
- def dataSearch(month, day, weather_elements, location, precipitation):
281
- if location=='Seoul':
282
- df = pd.read_csv('Seoul.csv')
283
- elif location=='Washington':
284
- df = pd.read_csv('Washington.csv')
285
-
286
- if precipitation:
287
- weather_elements.append('precipitation')
288
-
289
- if day in ['1','2','3','4','5','6','7','8','9']:
290
- today = '2022-'+month +'-0'+day
291
- else:
292
- today = '2022-'+month+'-'+day
293
-
294
- df1 = df[df.date == today]
295
- columns = ['location', 'date', 'time'] + weather_elements
296
- df2 = df1.loc[:, columns]
297
-
298
- return df2
299
-
300
- # show weather data in plot using matplotlib
301
- def showOutput(month, day, weather_elements, location, precipitation):
302
- if month=='January':
303
- month = '01'
304
- elif month=='February':
305
- month = '02'
306
- elif month=='March':
307
- month = '03'
308
- elif month=='April':
309
- month = '04'
310
- elif month=='May':
311
- month = '05'
312
- elif month=='June':
313
- month = '06'
314
- elif month=='July':
315
- month = '07'
316
- elif month=='August':
317
- month = '08'
318
- elif month=='September':
319
- month = '09'
320
- elif month=='October':
321
- month = '10'
322
- elif month=='November':
323
- month = '11'
324
- elif month=='December':
325
- month = '12'
326
-
327
- weatherTable = dataSearch(month, day, weather_elements, location, precipitation)
328
-
329
- if precipitation:
330
- weather_elements.remove('precipitation')
331
-
332
- if day in ['1','2','3','4','5','6','7','8','9']:
333
- xname = '2022-'+month +'-0'+day
334
- else:
335
- xname = '2022-'+month+'-'+day
336
-
337
- y_value=[0]*len(weather_elements)
338
-
339
- for i in range(len(weather_elements)):
340
- y_value[i] = weatherTable[weather_elements[i]]
341
-
342
- x_value = weatherTable['time']
343
-
344
- if 'humidity' in weather_elements:
345
- humidity_index = weather_elements.index('humidity')
346
- if weather_elements[humidity_index] != weather_elements[-1]:
347
- temp = weather_elements[humidity_index]
348
- weather_elements[humidity_index] = weather_elements[-1]
349
- weather_elements[-1] = temp
350
-
351
-
352
- if len(weather_elements) == 1:
353
- weatherPlot = plt.figure(figsize=(10,10))
354
- plt.title("2022 Weather Graph", fontsize=20, fontweight='bold')
355
- plt.xlabel(xname,labelpad=5, fontsize=15)
356
- plt.ylabel(weather_elements[0], labelpad=15, fontsize=15)
357
- plt.xticks(size=10, rotation=45)
358
-
359
- plt.bar(x_value, y_value[-1], color='skyblue', label='1st data')
360
- plt.legend(loc = "upper left")
361
-
362
- elif len(weather_elements) == 2:
363
- weatherPlot, ax1 = plt.subplots(figsize=(10,10))
364
- plt.title("2022 Weather Graph", fontsize=20, fontweight='bold')
365
- plt.xticks(size=10, rotation=45)
366
-
367
- ax1.bar(x_value, y_value[-1], color='skyblue', label='1st data')
368
- ax1.set_xlabel(xname, labelpad=5, fontsize=15)
369
- ax1.set_ylabel(weather_elements[1], labelpad=15, fontsize=15)
370
- ax1.legend(loc='upper left')
371
-
372
- ax1_sub = ax1.twinx()
373
- ax1_sub.plot(x_value, y_value[0], color='red', marker = "o", label='2nd data')
374
- ax1_sub.set_ylabel(weather_elements[0], labelpad=25, fontsize=15, rotation=270)
375
- ax1_sub.legend(loc='upper right')
376
-
377
- elif len(weather_elements) == 3:
378
- weatherPlot, (ax1, ax2) = plt.subplots(2, 1, figsize=(10,15), constrained_layout=True)
379
-
380
- line1 = ax1.plot(x_value, y_value[0], color='red', marker = "o", label='1st data')
381
- ax1.set_xlabel(xname, labelpad=5, fontsize=15)
382
- ax1.set_ylabel(weather_elements[0], labelpad=15, fontsize=15)
383
- ax1.set_title("2022 Weather Graph", fontsize=20, fontweight='bold')
384
- ax1.tick_params(axis='x', rotation=45, labelsize=10)
385
-
386
- ax1_sub = ax1.twinx()
387
- line2 = ax1_sub.plot(x_value, y_value[1], color='blue', marker = "o", label='2nd data')
388
- ax1_sub.set_ylabel(weather_elements[1], labelpad=25, fontsize=15, rotation=270)
389
-
390
- lines = line1 + line2
391
- labels = [l.get_label() for l in lines]
392
- ax1.legend(lines, labels, loc='upper left')
393
-
394
- ax2.bar(x_value, y_value[-1], color='skyblue', label='3rd data')
395
- ax2.set_xlabel(xname, labelpad=5, fontsize=15)
396
- ax2.set_ylabel(weather_elements[-1], labelpad=15, fontsize=15)
397
- ax2.tick_params(axis='x', rotation=45, labelsize=10)
398
- ax2.legend(loc='upper right')
399
-
400
- elif len(weather_elements) == 4:
401
- weatherPlot, (ax1, ax2) = plt.subplots(2,1, figsize=(10,15), constrained_layout=True)
402
-
403
- line1 = ax1.plot(x_value, y_value[0], color='red', marker = "o", label='1st data')
404
- ax1.set_xlabel(xname, labelpad=5, fontsize=15)
405
- ax1.set_ylabel(weather_elements[0], labelpad=15, fontsize=15)
406
- ax1.set_title("2022 Weather Graph", fontsize=20, fontweight='bold')
407
- ax1.tick_params(axis='x', rotation=45, labelsize=10)
408
-
409
- ax1_sub = ax1.twinx()
410
- line2 = ax1_sub.plot(x_value, y_value[1], color='blue', marker = "o", label='2nd data')
411
- ax1_sub.set_ylabel(weather_elements[1], labelpad=25, fontsize=15, rotation=270)
412
-
413
- lines = line1 + line2
414
- labels = [l.get_label() for l in lines]
415
- ax1.legend(lines, labels, loc='upper left')
416
-
417
- ax2.bar(x_value, y_value[-1], color='skyblue', label='3rd data')
418
- ax2.set_xlabel(xname, labelpad=5, fontsize=15)
419
- ax2.set_ylabel(weather_elements[-1], labelpad=15, fontsize=15)
420
- ax2.tick_params(axis='x', rotation=45, labelsize=10)
421
- ax2.legend(loc='upper left')
422
-
423
- ax2_sub = ax2.twinx()
424
- ax2_sub.plot(x_value, y_value[2], color='gray', marker = "o", label='4th data')
425
- ax2_sub.set_ylabel(weather_elements[2], labelpad=25, fontsize=15, rotation=270)
426
- ax2_sub.legend(loc='upper right')
427
-
428
-
429
- else:
430
- if len(weather_elements) == 1:
431
- weatherPlot = plt.figure(figsize=(10,10))
432
- plt.title("2022 Weather Graph", fontsize=20, fontweight='bold')
433
- plt.xlabel(xname,labelpad=5, fontsize=15)
434
- plt.ylabel(weather_elements[0], labelpad=15, fontsize=15)
435
- plt.xticks(size=10, rotation=45)
436
- plt.plot(x_value, y_value[0], color='red', marker='o', label='1st data')
437
- plt.legend(loc = "upper left")
438
-
439
- elif len(weather_elements) == 2:
440
- weatherPlot, ax1 = plt.subplots(figsize=(10,10))
441
- plt.title("2022 Weather Graph", fontsize=20, fontweight='bold')
442
- plt.xticks(size=10, rotation=45)
443
-
444
- line1 = ax1.plot(x_value, y_value[0], color='red', marker='o', label='1st data')
445
- ax1.set_xlabel(xname, labelpad=5, fontsize=15)
446
- ax1.set_ylabel(weather_elements[0], labelpad=15, fontsize=15)
447
-
448
- ax1_sub = ax1.twinx()
449
- line2 = ax1_sub.plot(x_value, y_value[1], color='skyblue', marker='o', label='2nd data')
450
- ax1_sub.set_ylabel(weather_elements[1], labelpad=25, fontsize=15, rotation=270)
451
-
452
- lines = line1 + line2
453
- labels = [l.get_label() for l in lines]
454
- ax1.legend(lines, labels, loc='upper left')
455
-
456
- elif len(weather_elements) == 3:
457
- weatherPlot, (ax1, ax2) = plt.subplots(2,1, figsize=(10,15), constrained_layout=True)
458
-
459
- line1 = ax1.plot(x_value, y_value[0], color='red', marker = "o", label='1st data')
460
- ax1.set_xlabel(xname, labelpad=5, fontsize=15)
461
- ax1.set_ylabel(weather_elements[0], labelpad=15, fontsize=15)
462
- ax1.set_title("2022 Weather Graph", fontsize=20, fontweight='bold')
463
- ax1.tick_params(axis='x', rotation=45, labelsize=10)
464
-
465
- ax1_sub = ax1.twinx()
466
- line2 = ax1_sub.plot(x_value, y_value[1], color='skyblue', marker = "o", label='2nd data')
467
- ax1_sub.set_ylabel(weather_elements[1], labelpad=25, fontsize=15, rotation=270)
468
-
469
- lines = line1 + line2
470
- labels = [l.get_label() for l in lines]
471
- ax1.legend(lines, labels, loc='upper left')
472
-
473
- ax2.plot(x_value, y_value[2], color='gray', marker = "o", label='3rd data')
474
- ax2.set_xlabel(xname, labelpad=5, fontsize=15)
475
- ax2.set_ylabel(weather_elements[2], labelpad=15, fontsize=15)
476
- ax2.tick_params(axis='x', rotation=45, labelsize=10)
477
- ax2.legend(loc='upper left')
478
-
479
- return [weatherTable, weatherPlot]
480
-
481
- output1 = gr.Dataframe()
482
- output2 = gr.Plot()
483
-
484
- # make gradio interface
485
- demo = gr.Interface(
486
- fn=showOutput,
487
- inputs=[
488
- gr.Dropdown(["January", "February", "March", "April", "May","June",
489
- "July", "August", "September", "October", "November", "December"],label="Month", info="Select Months"),
490
- gr.Dropdown(["1", "2", "3", "4", "5", "6", "7", "8", "9", "10",
491
- "11", "12", "13", "14", "15", "16", "17", "18", "19", "20",
492
- "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"], label="Day", info="Select Day"),
493
- gr.CheckboxGroup(["temperature(˚C)", "wind(m/s)", "humidity(%)", "air_pressure(hPa)"],
494
- label="Weather element", info="Choose weather element"),
495
- gr.Radio(["Washington", "Seoul"], label="Location", info="Choose location"),
496
- gr.Checkbox(label="precipation?")],
497
- outputs=[output1,output2]
498
- )
499
-
500
- if __name__=="__main__":
501
- demo.launch()
502
- ```
503
-
504
- The demo below will appear automatically within the Jupyter Notebook, or pop in a browser on http://localhost:7860 if running from a script:
505
-
506
- ![weather data demo](readme_files/screenshot.gif)
 
1
+ ---
2
+ title: Gradio Demo
3
+ emoji: 🐠
4
+ colorFrom: indigo
5
+ colorTo: gray
6
+ sdk: gradio
7
+ sdk_version: 3.29.0
8
+ app_file: app.py
9
+ pinned: false
10
+ license: apache-2.0
11
+ ---
12
+
13
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference