import gradio as gr

# FramePack - 画像から動画生成 アプリケーション

def make_custom_css():
    """カスタムCSSを作成してレスポンシブ対応およびエラースタイルを定義"""
    # （省略: 既存のCSS定義をそのまま利用）
    return combined_css  # 前述のCSSを返す

css = make_custom_css()

gr_ui = gr.Blocks(css=css).queue()
with gr_ui:
    # アプリタイトル
    gr.HTML("<h1>FramePack - 画像から動画生成</h1>")

    # レイアウト: 左側は入力、右側は出力
    with gr.Row():
        with gr.Column():
            # 画像アップロード
            input_image = gr.Image(
                source='upload',
                type="numpy",
                label="画像をアップロード",
                height=320
            )

            # プロンプト入力
            prompt = gr.Textbox(
                label="プロンプト",
                placeholder="The camera smoothly orbits around the center of the scene, keeping the center point fixed and always in view"
            )

            # クイックプロンプト一覧
            quick_prompts = [
                ["The camera smoothly orbits around the center of the scene, keeping the center point fixed and always in view"],
            ]
            example_prompts = gr.Dataset(
                samples=quick_prompts,
                label='クイックプロンプト',
                samples_per_page=10,
                components=[prompt]
            )
            example_prompts.click(lambda x: x[0], inputs=[example_prompts], outputs=prompt)

            # 操作ボタン
            with gr.Row():
                start_button = gr.Button("生成開始", variant="primary")
                stop_button = gr.Button("生成停止", interactive=False)

            # 設定パネル
            seed = gr.Number(
                label="シード値",
                value=31337,
                precision=0
            )
            video_length = gr.Slider(
                label="動画の長さ (最大5秒)",
                minimum=1,
                maximum=5,
                value=3,
                step=0.1
            )
            steps = gr.Slider(
                label="推論ステップ数",
                minimum=1,
                maximum=100,
                value=25,
                step=1
            )
            teacache = gr.Checkbox(
                label="TeaCacheを使用",
                value=True,
                info="高速化しますが、手指の生成品質が若干低下する可能性があります。"
            )

        with gr.Column():
            # プレビュー表示
            preview = gr.Image(
                label="プレビュー",
                visible=False,
                height=200
            )
            # 生成結果動画
            result_video = gr.Video(
                label="生成された動画",
                autoplay=True,
                loop=True,
                height=512
            )

            # 進捗表示
            progress_desc = gr.Markdown("")
            progress_bar = gr.HTML("")

            # エラーメッセージ表示
            error_html = gr.HTML("", visible=True)

    # 各種処理関数との紐付け
    inputs = [input_image, prompt, seed, video_length, steps, teacache]
    start_button.click(fn=process, inputs=inputs,
                       outputs=[result_video, preview, progress_desc, progress_bar, start_button, stop_button])
    stop_button.click(fn=end_process)

# アプリ起動
gr_ui.launch()