Upload 3 files

app.py

@@ -0,0 +1,135 @@
+import gradio as gr
+from gradio_client import Client, handle_file
+from deep_translator import GoogleTranslator  # Import GoogleTranslator dari deep_translator
+from themes import IndonesiaTheme_2  # Pastikan tema ini telah dibuat atau diimpor dengan benar
+
+# Inisialisasi client untuk API Oryx
+client = Client("THUdyh/Oryx")
+
+# Fungsi untuk memanggil API /predict dan menerjemahkan hasilnya
+def oryx_inference(multimodal):
+    try:
+        # Jika terdapat file yang diunggah, siapkan dengan handle_file()
+        files = [handle_file(file) for file in multimodal["files"]]
+        
+        # Panggilan ke API /predict dengan parameter multimodal
+        result = client.predict(
+            multimodal={"text": multimodal["text"], "files": files},
+            api_name="/predict"
+        )
+        
+        # Menerjemahkan hasil ke dalam bahasa Indonesia menggunakan deep_translator
+        translated_result = GoogleTranslator(source='auto', target='id').translate(result)
+        return translated_result
+    except Exception as e:
+        return f"Terjadi kesalahan: {str(e)}"
+
+# CSS untuk styling antarmuka
+css = """
+#col-left, #col-mid {
+    margin: 0 auto;
+    max-width: 400px;
+    padding: 15px;
+    border-radius: 10px;
+    background-color: #FFFFFF; /* Use a white background for clean look */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Softer shadow */
+}
+
+#col-right {
+    margin: 0 auto;
+    max-width: 400px;
+    padding: 15px;
+    border-radius: 10px;
+    background: linear-gradient(180deg, #C5CAE9, #E8EAF6); /* Subtle gradient */
+    color: #37474F; /* Dark gray text for better contrast */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+#col-bott {
+    margin: 0 auto;
+    padding: 15px;
+    border-radius: 10px;
+    background-color: #FFFFFF; /* Same as other columns for consistency */
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+#banner {
+    width: 100%;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+#run-button {
+    background-color: #00796B; /* Teal color for buttons */
+    color: white;
+    font-weight: bold;
+    padding: 20px;
+    border-radius: 10px;
+    cursor: pointer;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Subtle shadow for modern touch */
+}
+
+#footer {
+    text-align: center;
+    margin-top: 20px;
+    color: #607D8B; /* Slightly darker text color */
+}
+
+#markdown-silver {
+    color: #B0BEC5; /* Lighter gray for markdown text */
+}
+
+"""
+
+# Interface Gradio menggunakan gr.Blocks
+with gr.Blocks(css=css, theme=IndonesiaTheme_2()) as app:
+# Tambahkan banner
+    gr.HTML("""
+        <div style='text-align: center;'>
+            <img src='https://i.ibb.co.com/rmXq4Jn/banner03.jpg' alt='Banner' style='width: 100%; height: auto;'/>
+        </div>
+    """)
+    gr.HTML("<h2 style='text-align: center;'>On-Demand Spatial-Temporal Understanding at Arbitrary Resolution</h2>")
+    
+    # Kolom untuk Input Multimodal dan Tombol Submit
+    with gr.Row():
+        with gr.Column(elem_id="col-left"):
+            # Input teks dan file
+            multimodal_input = gr.MultimodalTextbox(
+                file_types=[".mp4", "image"],
+                placeholder="Masukkan pesan atau unggah file..."
+            )
+            # Tombol untuk memulai inferensi
+            submit_button = gr.Button("Proses", elem_id="run-button")
+        
+        # Output area untuk hasil terjemahan
+        output_text = gr.Textbox(label="Hasil Prediksi AI")
+
+    # Menghubungkan tombol submit ke fungsi inferensi
+    submit_button.click(
+        fn=oryx_inference,
+        inputs=multimodal_input,
+        outputs=output_text
+    )
+    
+    # Footer atau Artikel tambahan
+    gr.Markdown("""
+    <footer id='footer'>
+    ### Citation
+    ```
+    @article{liu2024oryx,
+      title={Oryx MLLM: On-Demand Spatial-Temporal Understanding at Arbitrary Resolution},
+      author={Liu, Zuyan dan lain-lain},
+      journal={arXiv preprint arXiv:2409.12961},
+      year={2024}
+    }
+    ```
+    </footer>
+    """)
+
+    # Bagian bawah: footer
+    gr.Markdown("<footer id='footer'>Integrasi Oryx API dengan Gradio © 2024 | 🇮🇩 Untuk Indonesia Jaya!</footer>")
+
+# Meluncurkan aplikasi
+if __name__ == "__main__":
+    app.launch(show_error=True)  # Mengaktifkan pelaporan error secara rinci

requirements.txt

@@ -0,0 +1,27 @@
+huggingface_hub==0.22.2
+torch==2.1.2
+numpy==1.26.4
+torchvision
+transformers==4.39.2
+tokenizers==0.15.2
+sentencepiece==0.1.99
+shortuuid
+accelerate==0.27.2
+peft==0.4.0
+bitsandbytes==0.41.0
+pydantic<2,>=1
+markdown2
+scikit-learn==1.2.2
+gradio==3.35.2
+gradio_client==0.2.9
+requests
+httpx==0.24.0
+uvicorn
+fastapi
+einops==0.6.1
+einops-exts==0.0.4
+timm==0.9.16
+decord
+ninja
+deepspeed==0.12.2
+protobuf

themes.py

@@ -0,0 +1,56 @@
+from __future__ import annotations
+from typing import Iterable
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+
+class IndonesiaTheme_2(Base):
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = colors.teal,  # Choose a soothing color for primary elements
+        secondary_hue: colors.Color | str = colors.amber,  # Choose a contrasting color for secondary elements
+        neutral_hue: colors.Color | str = colors.gray,  # Set neutral tones for text and other elements
+        spacing_size: sizes.Size | str = sizes.spacing_md,  # Medium spacing for balanced padding
+        radius_size: sizes.Size | str = sizes.radius_lg,  # Large radius for rounded corners
+        text_size: sizes.Size | str = sizes.text_md,  # Medium text size for readability
+        font: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("Nunito"),  # A clean, modern font
+            "ui-sans-serif",
+            "sans-serif",
+        ),
+        font_mono: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("Fira Code"),
+            "ui-monospace",
+            "monospace",
+        ),
+    ):
+        super().__init__(
+            primary_hue=primary_hue,
+            secondary_hue=secondary_hue,
+            neutral_hue=neutral_hue,
+            spacing_size=spacing_size,
+            radius_size=radius_size,
+            text_size=text_size,
+            font=font,
+            font_mono=font_mono,
+        )
+        # Applying a modern and thematic style
+        super().set(
+            body_background_fill="linear-gradient(135deg, #D7E8F7, #F6F1ED)",  # Gradient for a modern look
+            body_background_fill_dark="linear-gradient(135deg, #4A4A4A, #2A2A2A)",  # Dark mode gradient
+            button_primary_background_fill="linear-gradient(90deg, #00796B, #004D40)",  # Teal gradient for buttons
+            button_primary_background_fill_hover="linear-gradient(90deg, #009688, #00695C)",  # Hover effect
+            button_primary_text_color="white",
+            button_primary_background_fill_dark="linear-gradient(90deg, #004D40, #00251A)",  # Dark mode buttons
+            slider_color="*secondary_300",  # Consistent with secondary color
+            slider_color_dark="*secondary_600",  # Dark mode slider color
+            block_title_text_weight="600",
+            block_border_width="2px",
+            block_shadow="*shadow_drop_md",  # Softer shadow for modern look
+            button_shadow="*shadow_drop_md",
+            button_large_padding="20px",  # Consistent padding for buttons
+        )