File size: 3,554 Bytes
2f19003
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
import gradio as gr
from gradio import themes
from pannellum import Pannellum

# ... (Your other functions like `text_to_pano` remain unchanged)

class RedTheme(themes.Theme):
    def __init__(self):
        super().__init__(
            # Primary Color (Different Shades of Red)
            primary_hue=themes.Color(
                name="red",
                light="#FF5733",    # Light Red
                dark="#C70039"     # Dark Red
            ),
            # Secondary Color (Gray for Contrast)
            secondary_hue=themes.Color(
                name="gray",
                light="#808080",   # Light Gray
                dark="#333333"    # Dark Gray
            ),
            # ... customize other colors if needed (e.g., background, text)
        )


with gr.Blocks(theme=RedTheme()) as demo:
    # Header with Image
    with gr.Row():
        gr.HTML(f"""
        <div style="display: flex; align-items: center; justify-content: space-between;">
            <img src="https://ant.dpu.ac.th/wp-content/uploads/2024/04/dpulogo.png" width="150" height="50">
            <div>
                <h1 align="center">SD-T2I-360PanoImage</h1>
                <p align="center">AI FOR VR 360° Panorama Image Generator</p>
            </div>
            <div style="font-size:12px; text-align: right;">
                <a href="https://github.com/ArcherFMY/SD-T2I-360PanoImage/" target="_blank">[Github]</a>
                <a href="https://huggingface.co/archerfmy0831/sd-t2i-360panoimage" target="_blank">[Models]</a>
            </div>
        </div>
        """) 

    # Credits and Information
    gr.Markdown(
        """
        This study was conducted in the College of Creative Design and Entertainment Technology laboratory at Dhurakij Pundit University by Asst. Prof. Banyapon Poolsawas. The project builds upon the SD-T2I-360PanoImage repository (https://github.com/ArcherFMY/SD-T2I-360PanoImage/) for Text-to-360Panorama Sample and Build it with aframe VR.
        """
    )

    # Input Components
    with gr.Row():
        with gr.Column():
            t2p_input = gr.Textbox(label="Enter your prompt", lines=3)
            t2p_upscale = gr.Checkbox(label="Upscale (takes about 60 seconds 6144x3072 resolution)")
            t2p_generate = gr.Button("Generate Panorama")
        with gr.Column(variant="default"):
            t2p_output = Pannellum(show_label=False, interactive=True)

    # A-Frame Preview (HTML)
    with gr.Row():
        t2p_image_output = gr.Image(label="Generated 360 Image")
        t2p_iframe = gr.HTML(label="A-Frame Preview")

    # Update Trigger (unchanged)
    update_trigger = gr.State(value=0)

    # Modified Generate Function
    def generate_with_update(prompt, upscale, trigger):
        output, image = text_to_pano(prompt, upscale)

        # A-Frame Preview Generation
        iframe_html = f"""
        <html>
        <head>
            <script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
        </head>
        <body>
            <a-scene>
                <a-sky src="{image}" rotation="0 -130 0"></a-sky>
                <a-text font="kelsonsans" value="Create from AI" width="6" position="-2.5 0.25 -1.5" rotation="0 15 0"></a-text>
            </a-scene>
        </body>
        </html>
        """

        return output, image, iframe_html, trigger + 1

    t2p_generate.click(
        generate_with_update,
        inputs=[t2p_input, t2p_upscale, update_trigger],
        outputs=[t2p_output, t2p_image_output, t2p_iframe, update_trigger]
    )

demo.launch()