Deddy commited on
Commit
083c2d3
โ€ข
1 Parent(s): e631ab8

Upload 3 files

Browse files
Files changed (3) hide show
  1. app.py +135 -0
  2. requirements.txt +27 -0
  3. 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
+ )