Spaces:
Sleeping
Sleeping
Upload 3 files
Browse files- app.py +135 -0
- requirements.txt +27 -0
- themes.py +56 -0
app.py
ADDED
@@ -0,0 +1,135 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import gradio as gr
|
2 |
+
from gradio_client import Client, handle_file
|
3 |
+
from deep_translator import GoogleTranslator # Import GoogleTranslator dari deep_translator
|
4 |
+
from themes import IndonesiaTheme_2 # Pastikan tema ini telah dibuat atau diimpor dengan benar
|
5 |
+
|
6 |
+
# Inisialisasi client untuk API Oryx
|
7 |
+
client = Client("THUdyh/Oryx")
|
8 |
+
|
9 |
+
# Fungsi untuk memanggil API /predict dan menerjemahkan hasilnya
|
10 |
+
def oryx_inference(multimodal):
|
11 |
+
try:
|
12 |
+
# Jika terdapat file yang diunggah, siapkan dengan handle_file()
|
13 |
+
files = [handle_file(file) for file in multimodal["files"]]
|
14 |
+
|
15 |
+
# Panggilan ke API /predict dengan parameter multimodal
|
16 |
+
result = client.predict(
|
17 |
+
multimodal={"text": multimodal["text"], "files": files},
|
18 |
+
api_name="/predict"
|
19 |
+
)
|
20 |
+
|
21 |
+
# Menerjemahkan hasil ke dalam bahasa Indonesia menggunakan deep_translator
|
22 |
+
translated_result = GoogleTranslator(source='auto', target='id').translate(result)
|
23 |
+
return translated_result
|
24 |
+
except Exception as e:
|
25 |
+
return f"Terjadi kesalahan: {str(e)}"
|
26 |
+
|
27 |
+
# CSS untuk styling antarmuka
|
28 |
+
css = """
|
29 |
+
#col-left, #col-mid {
|
30 |
+
margin: 0 auto;
|
31 |
+
max-width: 400px;
|
32 |
+
padding: 15px;
|
33 |
+
border-radius: 10px;
|
34 |
+
background-color: #FFFFFF; /* Use a white background for clean look */
|
35 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Softer shadow */
|
36 |
+
}
|
37 |
+
|
38 |
+
#col-right {
|
39 |
+
margin: 0 auto;
|
40 |
+
max-width: 400px;
|
41 |
+
padding: 15px;
|
42 |
+
border-radius: 10px;
|
43 |
+
background: linear-gradient(180deg, #C5CAE9, #E8EAF6); /* Subtle gradient */
|
44 |
+
color: #37474F; /* Dark gray text for better contrast */
|
45 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
46 |
+
}
|
47 |
+
|
48 |
+
#col-bott {
|
49 |
+
margin: 0 auto;
|
50 |
+
padding: 15px;
|
51 |
+
border-radius: 10px;
|
52 |
+
background-color: #FFFFFF; /* Same as other columns for consistency */
|
53 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
54 |
+
}
|
55 |
+
|
56 |
+
#banner {
|
57 |
+
width: 100%;
|
58 |
+
text-align: center;
|
59 |
+
margin-bottom: 20px;
|
60 |
+
}
|
61 |
+
|
62 |
+
#run-button {
|
63 |
+
background-color: #00796B; /* Teal color for buttons */
|
64 |
+
color: white;
|
65 |
+
font-weight: bold;
|
66 |
+
padding: 20px;
|
67 |
+
border-radius: 10px;
|
68 |
+
cursor: pointer;
|
69 |
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Subtle shadow for modern touch */
|
70 |
+
}
|
71 |
+
|
72 |
+
#footer {
|
73 |
+
text-align: center;
|
74 |
+
margin-top: 20px;
|
75 |
+
color: #607D8B; /* Slightly darker text color */
|
76 |
+
}
|
77 |
+
|
78 |
+
#markdown-silver {
|
79 |
+
color: #B0BEC5; /* Lighter gray for markdown text */
|
80 |
+
}
|
81 |
+
|
82 |
+
"""
|
83 |
+
|
84 |
+
# Interface Gradio menggunakan gr.Blocks
|
85 |
+
with gr.Blocks(css=css, theme=IndonesiaTheme_2()) as app:
|
86 |
+
# Tambahkan banner
|
87 |
+
gr.HTML("""
|
88 |
+
<div style='text-align: center;'>
|
89 |
+
<img src='https://i.ibb.co.com/rmXq4Jn/banner03.jpg' alt='Banner' style='width: 100%; height: auto;'/>
|
90 |
+
</div>
|
91 |
+
""")
|
92 |
+
gr.HTML("<h2 style='text-align: center;'>On-Demand Spatial-Temporal Understanding at Arbitrary Resolution</h2>")
|
93 |
+
|
94 |
+
# Kolom untuk Input Multimodal dan Tombol Submit
|
95 |
+
with gr.Row():
|
96 |
+
with gr.Column(elem_id="col-left"):
|
97 |
+
# Input teks dan file
|
98 |
+
multimodal_input = gr.MultimodalTextbox(
|
99 |
+
file_types=[".mp4", "image"],
|
100 |
+
placeholder="Masukkan pesan atau unggah file..."
|
101 |
+
)
|
102 |
+
# Tombol untuk memulai inferensi
|
103 |
+
submit_button = gr.Button("Proses", elem_id="run-button")
|
104 |
+
|
105 |
+
# Output area untuk hasil terjemahan
|
106 |
+
output_text = gr.Textbox(label="Hasil Prediksi AI")
|
107 |
+
|
108 |
+
# Menghubungkan tombol submit ke fungsi inferensi
|
109 |
+
submit_button.click(
|
110 |
+
fn=oryx_inference,
|
111 |
+
inputs=multimodal_input,
|
112 |
+
outputs=output_text
|
113 |
+
)
|
114 |
+
|
115 |
+
# Footer atau Artikel tambahan
|
116 |
+
gr.Markdown("""
|
117 |
+
<footer id='footer'>
|
118 |
+
### Citation
|
119 |
+
```
|
120 |
+
@article{liu2024oryx,
|
121 |
+
title={Oryx MLLM: On-Demand Spatial-Temporal Understanding at Arbitrary Resolution},
|
122 |
+
author={Liu, Zuyan dan lain-lain},
|
123 |
+
journal={arXiv preprint arXiv:2409.12961},
|
124 |
+
year={2024}
|
125 |
+
}
|
126 |
+
```
|
127 |
+
</footer>
|
128 |
+
""")
|
129 |
+
|
130 |
+
# Bagian bawah: footer
|
131 |
+
gr.Markdown("<footer id='footer'>Integrasi Oryx API dengan Gradio ยฉ 2024 | ๐ฎ๐ฉ Untuk Indonesia Jaya!</footer>")
|
132 |
+
|
133 |
+
# Meluncurkan aplikasi
|
134 |
+
if __name__ == "__main__":
|
135 |
+
app.launch(show_error=True) # Mengaktifkan pelaporan error secara rinci
|
requirements.txt
ADDED
@@ -0,0 +1,27 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
huggingface_hub==0.22.2
|
2 |
+
torch==2.1.2
|
3 |
+
numpy==1.26.4
|
4 |
+
torchvision
|
5 |
+
transformers==4.39.2
|
6 |
+
tokenizers==0.15.2
|
7 |
+
sentencepiece==0.1.99
|
8 |
+
shortuuid
|
9 |
+
accelerate==0.27.2
|
10 |
+
peft==0.4.0
|
11 |
+
bitsandbytes==0.41.0
|
12 |
+
pydantic<2,>=1
|
13 |
+
markdown2
|
14 |
+
scikit-learn==1.2.2
|
15 |
+
gradio==3.35.2
|
16 |
+
gradio_client==0.2.9
|
17 |
+
requests
|
18 |
+
httpx==0.24.0
|
19 |
+
uvicorn
|
20 |
+
fastapi
|
21 |
+
einops==0.6.1
|
22 |
+
einops-exts==0.0.4
|
23 |
+
timm==0.9.16
|
24 |
+
decord
|
25 |
+
ninja
|
26 |
+
deepspeed==0.12.2
|
27 |
+
protobuf
|
themes.py
ADDED
@@ -0,0 +1,56 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
from __future__ import annotations
|
2 |
+
from typing import Iterable
|
3 |
+
from gradio.themes.base import Base
|
4 |
+
from gradio.themes.utils import colors, fonts, sizes
|
5 |
+
|
6 |
+
class IndonesiaTheme_2(Base):
|
7 |
+
def __init__(
|
8 |
+
self,
|
9 |
+
*,
|
10 |
+
primary_hue: colors.Color | str = colors.teal, # Choose a soothing color for primary elements
|
11 |
+
secondary_hue: colors.Color | str = colors.amber, # Choose a contrasting color for secondary elements
|
12 |
+
neutral_hue: colors.Color | str = colors.gray, # Set neutral tones for text and other elements
|
13 |
+
spacing_size: sizes.Size | str = sizes.spacing_md, # Medium spacing for balanced padding
|
14 |
+
radius_size: sizes.Size | str = sizes.radius_lg, # Large radius for rounded corners
|
15 |
+
text_size: sizes.Size | str = sizes.text_md, # Medium text size for readability
|
16 |
+
font: fonts.Font
|
17 |
+
| str
|
18 |
+
| Iterable[fonts.Font | str] = (
|
19 |
+
fonts.GoogleFont("Nunito"), # A clean, modern font
|
20 |
+
"ui-sans-serif",
|
21 |
+
"sans-serif",
|
22 |
+
),
|
23 |
+
font_mono: fonts.Font
|
24 |
+
| str
|
25 |
+
| Iterable[fonts.Font | str] = (
|
26 |
+
fonts.GoogleFont("Fira Code"),
|
27 |
+
"ui-monospace",
|
28 |
+
"monospace",
|
29 |
+
),
|
30 |
+
):
|
31 |
+
super().__init__(
|
32 |
+
primary_hue=primary_hue,
|
33 |
+
secondary_hue=secondary_hue,
|
34 |
+
neutral_hue=neutral_hue,
|
35 |
+
spacing_size=spacing_size,
|
36 |
+
radius_size=radius_size,
|
37 |
+
text_size=text_size,
|
38 |
+
font=font,
|
39 |
+
font_mono=font_mono,
|
40 |
+
)
|
41 |
+
# Applying a modern and thematic style
|
42 |
+
super().set(
|
43 |
+
body_background_fill="linear-gradient(135deg, #D7E8F7, #F6F1ED)", # Gradient for a modern look
|
44 |
+
body_background_fill_dark="linear-gradient(135deg, #4A4A4A, #2A2A2A)", # Dark mode gradient
|
45 |
+
button_primary_background_fill="linear-gradient(90deg, #00796B, #004D40)", # Teal gradient for buttons
|
46 |
+
button_primary_background_fill_hover="linear-gradient(90deg, #009688, #00695C)", # Hover effect
|
47 |
+
button_primary_text_color="white",
|
48 |
+
button_primary_background_fill_dark="linear-gradient(90deg, #004D40, #00251A)", # Dark mode buttons
|
49 |
+
slider_color="*secondary_300", # Consistent with secondary color
|
50 |
+
slider_color_dark="*secondary_600", # Dark mode slider color
|
51 |
+
block_title_text_weight="600",
|
52 |
+
block_border_width="2px",
|
53 |
+
block_shadow="*shadow_drop_md", # Softer shadow for modern look
|
54 |
+
button_shadow="*shadow_drop_md",
|
55 |
+
button_large_padding="20px", # Consistent padding for buttons
|
56 |
+
)
|