Hugging Face's logo

Spaces:
Deddy
/
OD_SpatialTemporal_Img_Vid_3D
Running

App Files Community
OD_SpatialTemporal_Img_Vid_3D
File size: 4,222 Bytes 
083c2d3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
 
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