Update app.py

app.py

@@ -10,74 +10,6 @@ import json
 
 os.environ['HF_HOME'] = os.path.abspath(os.path.realpath(os.path.join(os.path.dirname(__file__), './hf_download')))
 
-# 日英両言語の翻訳辞書を追加
-translations = {
-    "en": {
-        "title": "FramePack_rotate_landscape - Rotating Landscape Video Generator",
-        "upload_image": "Upload Image",
-        "prompt": "Prompt",
-        "quick_prompts": "Quick Prompts",
-        "start_generation": "Generate",
-        "stop_generation": "Stop",
-        "use_teacache": "Use TeaCache",
-        "teacache_info": "Faster speed, but may result in slightly worse finger and hand generation.",
-        "negative_prompt": "Negative Prompt",
-        "seed": "Seed",
-        "video_length": "Video Length (max 5 seconds)",
-        "next_latents": "Next Latents",
-        "generated_video": "Generated Video",
-        "sampling_note": "Note: Due to reversed sampling, ending actions will be generated before starting actions. If the starting action is not in the video, please wait, it will be generated later.",
-        "error_message": "Error",
-        "processing_error": "Processing error",
-        "network_error": "Network connection is unstable, model download timed out. Please try again later.",
-        "memory_error": "GPU memory insufficient, please try increasing GPU memory preservation value or reduce video length.",
-        "model_error": "Failed to load model, possibly due to network issues or high server load. Please try again later.",
-        "partial_video": "Processing error, but partial video has been generated",
-        "processing_interrupt": "Processing was interrupted, but partial video has been generated"
-    },
-    "ja": {
-        "title": "FramePack_rotate_landscape - 風景回転動画ジェネレーター",
-        "upload_image": "画像をアップロード",
-        "prompt": "プロンプト",
-        "quick_prompts": "クイックプロンプト一覧",
-        "start_generation": "生成開始",
-        "stop_generation": "停止",
-        "use_teacache": "TeaCacheを使用",
-        "teacache_info": "処理速度が速くなりますが、指や手の生成品質が若干低下する可能性があります。",
-        "negative_prompt": "ネガティブプロンプト",
-        "seed": "シード値",
-        "video_length": "動画の長さ（最大5秒）",
-        "gpu_memory": "GPU推論保存メモリ(GB)（値が大きいほど処理が遅くなります）",
-        "gpu_memory_info": "OOMエラーが発生した場合は、この値を大きくしてください。値が大きいほど処理が遅くなります。",
-        "next_latents": "次の潜在変数",
-        "generated_video": "生成された動画",
-        "sampling_note": "注意：逆順サンプリングのため、終了動作が開始動作より先に生成されます。開始動作が動画に表示されていない場合は、しばらくお待ちください。後で生成されます。",
-        "error_message": "エラーメッセージ",
-        "processing_error": "処理中にエラーが発生しました",
-        "network_error": "ネットワーク接続が不安定です。モデルのダウンロードがタイムアウトしました。後ほど再試行してください。",
-        "memory_error": "GPUメモリが不足しています。GPU推論保存メモリの値を大きくするか、動画の長さを短くしてください。",
-        "model_error": "モデルの読み込みに失敗しました。ネットワークの問題やサーバー負荷が高い可能性があります。後ほど再試行してください。",
-        "partial_video": "処理中にエラーが発生しましたが、部分的な動画は生成されています",
-        "processing_interrupt": "処理が中断されましたが、部分的な動画は生成されています"
-    }
-}
-
-# 言語切り替え機能
-def get_translation(key, lang="en"):
-    if lang in translations and key in translations[lang]:
-        return translations[lang][key]
-    # デフォルトで英語を返す
-    return translations["en"].get(key, key)
-
-# デフォルト言語設定
-current_language = "en"
-
-# 言語切り替え関数
-def switch_language():
-    global current_language
-    current_language = "ja" if current_language == "en" else "en"
-    return current_language
-
 import gradio as gr
 import torch
 import traceback
@@ -1000,8 +932,7 @@ if IN_HF_SPACE and 'spaces' in globals():
                         
                         # エラーメッセージがある場合、わかりやすいエラー表示を作成
                         if error_message:
-                            error_html = create_error_html(error_message)
-                            yield output_filename, gr.update(visible=False), gr.update(), error_html, gr.update(interactive=True), gr.update(interactive=False)
+                            yield output_filename, gr.update(visible=False), gr.update(), gr.update(interactive=True), gr.update(interactive=False)
                         else:
                             # 成功時にエラー表示をしない
                             yield output_filename, gr.update(visible=False), gr.update(), '', gr.update(interactive=True), gr.update(interactive=False)
@@ -1015,11 +946,9 @@ if IN_HF_SPACE and 'spaces' in globals():
                         
                         # 部分的に生成された動画がある場合、それを返す
                         if prev_output_filename:
-                            error_html = create_error_html("処理がタイムアウトしましたが、部分的な動画は生成されています", is_timeout=True)
-                            yield prev_output_filename, gr.update(visible=False), gr.update(), error_html, gr.update(interactive=True), gr.update(interactive=False)
+                            yield prev_output_filename, gr.update(visible=False), gr.update(), gr.update(interactive=True), gr.update(interactive=False)
                         else:
-                            error_html = create_error_html(f"処理がタイムアウトしました: {e}", is_timeout=True)
-                            yield None, gr.update(visible=False), gr.update(), error_html, gr.update(interactive=True), gr.update(interactive=False)
+                            yield None, gr.update(visible=False), gr.update(), gr.update(interactive=True), gr.update(interactive=False)
                         break
                     
         except Exception as e:
@@ -1027,8 +956,7 @@ if IN_HF_SPACE and 'spaces' in globals():
             traceback.print_exc()
             error_msg = str(e)
             
-            error_html = create_error_html(error_msg)
-            yield None, gr.update(visible=False), gr.update(), error_html, gr.update(interactive=True), gr.update(interactive=False)
+            yield None, gr.update(visible=False), gr.update(), gr.update(interactive=True), gr.update(interactive=False)
     
     process = process_with_gpu
 else:
@@ -1084,8 +1012,7 @@ else:
                         
                         # エラーメッセージがある場合、わかりやすいエラー表示を作成
                         if error_message:
-                            error_html = create_error_html(error_message)
-                            yield output_filename, gr.update(visible=False), gr.update(), error_html, gr.update(interactive=True), gr.update(interactive=False)
+                            yield output_filename, gr.update(visible=False), gr.update(), gr.update(interactive=True), gr.update(interactive=False)
                         else:
                             # 成功時にエラー表示をしない
                             yield output_filename, gr.update(visible=False), gr.update(), '', gr.update(interactive=True), gr.update(interactive=False)
@@ -1099,11 +1026,9 @@ else:
                         
                         # 部分的に生成された動画がある場合、それを返す
                         if prev_output_filename:
-                            error_html = create_error_html("処理がタイムアウトしましたが、部分的な動画は生成されています", is_timeout=True)
-                            yield prev_output_filename, gr.update(visible=False), gr.update(), error_html, gr.update(interactive=True), gr.update(interactive=False)
+                            yield prev_output_filename, gr.update(visible=False), gr.update(), gr.update(interactive=True), gr.update(interactive=False)
                         else:
-                            error_html = create_error_html(f"処理がタイムアウトしました: {e}", is_timeout=True)
-                            yield None, gr.update(visible=False), gr.update(), error_html, gr.update(interactive=True), gr.update(interactive=False)
+                            yield None, gr.update(visible=False), gr.update(), gr.update(interactive=True), gr.update(interactive=False)
                         break
                     
         except Exception as e:
@@ -1111,8 +1036,7 @@ else:
             traceback.print_exc()
             error_msg = str(e)
             
-            error_html = create_error_html(error_msg)
-            yield None, gr.update(visible=False), gr.update(), error_html, gr.update(interactive=True), gr.update(interactive=False)
+            yield None, gr.update(visible=False), gr.update(), gr.update(interactive=True), gr.update(interactive=False)
     
 
 def end_process():
@@ -1163,17 +1087,6 @@ def make_custom_css():
         margin: 0 auto;
     }
     
-    /* 言語切り替えボタンのスタイル - CSSは自動生成されるので不要です */
-    
-    /* 言語切り替え用のクラス */
-    body.lang-ja .lang-en,
-    body.lang-en .lang-ja {
-        display: none !important;
-    }
-    
-    body.lang-initialized .dual-lang-text {
-        display: none !important;
-    }
     
     /* ページタイトルのスタイル */
     h1 {
@@ -1316,288 +1229,6 @@ def make_custom_css():
 css = make_custom_css()
 block = gr.Blocks(css=css).queue()
 with block:
-    # 言語切り替え機能を追加
-    gr.HTML("""
-        <div id="app-container">
-            <script>
-                // 言語切り替え機能のJavaScriptコード
-                document.addEventListener('DOMContentLoaded', function() {
-                    console.log('DOM読み込み完了、言語切り替え初期化処理を開始します');
-                    
-                    // グローバル変数、現在の言語を保存（デフォルトは日本語）
-                    window.currentLang = "ja";
-                    
-                    // CSSを動的に追加
-                    const styleElement = document.createElement('style');
-                    styleElement.textContent = `
-                        /* 言語切り替え用のスタイル */
-                        body.lang-ja .lang-en,
-                        body.lang-en .lang-ja {
-                            display: none !important;
-                        }
-                        
-                        /* スラッシュ付きのデュアル言語表示を非表示 */
-                        body.lang-initialized .dual-lang-text {
-                            display: none !important;
-                        }
-                        
-                        /* 言語固有表示用クラス */
-                        .lang-ja, .lang-en {
-                            display: block;
-                        }
-                    `;
-                    document.head.appendChild(styleElement);
-                    
-                    // 翻訳データ
-                    const translations = {
-                        "en": {
-                            "title": "FramePack_rotate_landscape - Rotating Landscape Video Generator",
-                            "upload_image": "Upload Image",
-                            "prompt": "Prompt",
-                            "quick_prompts": "Quick Prompts",
-                            "start_generation": "Generate",
-                            "stop_generation": "Stop",
-                            "use_teacache": "Use TeaCache",
-                            "teacache_info": "Faster speed, but may result in slightly worse finger and hand generation.",
-                            "negative_prompt": "Negative Prompt",
-                            "seed": "Seed",
-                            "video_length": "Video Length (max 1 seconds)",
-                            "next_latents": "Next Latents",
-                            "generated_video": "Generated Video",
-                            "preview": "Preview",
-                            "sampling_note": "Note: Due to reversed sampling, ending actions will be generated before starting actions. If the starting action is not in the video, please wait, it will be generated later.",
-                            "error_message": "Error",
-                            "processing_error": "Processing error",
-                            "network_error": "Network connection is unstable, model download timed out. Please try again later.",
-                            "memory_error": "GPU memory insufficient, please try increasing GPU memory preservation value or reduce video length.",
-                            "model_error": "Failed to load model, possibly due to network issues or high server load. Please try again later.",
-                            "partial_video": "Processing error, but partial video has been generated",
-                            "processing_interrupt": "Processing was interrupted, but partial video has been generated"
-                        },
-                        "ja": {
-                            "title": "FramePack_rotate_landscape - 風景回転動画ジェネレーター",
-                            "upload_image": "画像をアップロード",
-                            "prompt": "プロンプト",
-                            "quick_prompts": "クイックプロンプト一覧",
-                            "start_generation": "生成開始",
-                            "stop_generation": "停止",
-                            "use_teacache": "TeaCacheを使用",
-                            "teacache_info": "処理速度が速くなりますが、指や手の生成品質が若干低下する可能性があります。",
-                            "negative_prompt": "ネガティブプロンプト",
-                            "seed": "シード値",
-                            "video_length": "動画の長さ（最大1秒）",
-                            "next_latents": "次の潜在変数",
-                            "generated_video": "生成された動画",
-                            "preview": "プレビュー",
-                            "sampling_note": "注意：逆順サンプリングのため、終了動作が開始動作より先に生成されます。開始動作が動画に表示されていない場合は、しばらくお待ちください。後で生成されます。",
-                            "error_message": "エラーメッセージ",
-                            "processing_error": "処理中にエラーが発生しました",
-                            "network_error": "ネットワーク接続が不安定です。モデルのダウンロードがタイムアウトしました。後ほど再試行してください。",
-                            "memory_error": "GPUメモリが不足しています。GPU推論保存メモリの値を大きくするか、動画の長さを短くしてください。",
-                            "model_error": "モデルの読み込みに失敗しました。ネットワークの問題やサーバー負荷が高い可能性があります。後ほど再試行してください。",
-                            "partial_video": "処理中にエラーが発生しましたが、部分的な動画は生成されています",
-                            "processing_interrupt": "処理が中断されましたが、部分的な動画は生成されています"
-                        }
-                    };
-                    
-                    // 言語切り替えボタンを作成
-                    const langToggleBtn = document.createElement('button');
-                    langToggleBtn.id = 'language-toggle';
-                    langToggleBtn.textContent = 'English / 英語';
-                    langToggleBtn.onclick = toggleLanguage;
-                    langToggleBtn.style.position = 'fixed';
-                    langToggleBtn.style.top = '10px';
-                    langToggleBtn.style.right = '10px';
-                    langToggleBtn.style.zIndex = '1000';
-                    langToggleBtn.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
-                    langToggleBtn.style.color = 'white';
-                    langToggleBtn.style.border = 'none';
-                    langToggleBtn.style.borderRadius = '4px';
-                    langToggleBtn.style.padding = '5px 10px';
-                    langToggleBtn.style.cursor = 'pointer';
-                    langToggleBtn.style.fontSize = '14px';
-                    document.body.appendChild(langToggleBtn);
-                    
-                    // 言語切り替え関数
-                    window.toggleLanguage = function() {
-                        const newLang = window.currentLang === "en" ? "ja" : "en";
-                        window.currentLang = newLang;
-                        
-                        // body要素に言語クラスを設定
-                        document.body.classList.remove('lang-ja', 'lang-en');
-                        document.body.classList.add(`lang-${newLang}`);
-                        
-                        // ボタンのテキストを更新
-                        langToggleBtn.textContent = newLang === "en" ? '日本語 / Japanese' : 'English / 英語';
-                        
-                        applyTranslations();
-                        console.log(`言語を ${newLang} に切り替えました`);
-                    }
-                    
-                    // 翻訳を適用する関数
-                    function applyTranslations() {
-                        // 通常のラベル要素の処理
-                        const allLabels = document.querySelectorAll('label, span.label-wrap span, div.wrap span, h1, .gradio-button, .note');
-                        
-                        allLabels.forEach(label => {
-                            const text = label.textContent.trim();
-                            
-                            // スラッシュ付きのテキストなら分割して処理
-                            if (text.includes('/')) {
-                                // 初回のみ言語ごとの要素を作成する
-                                if (!label.classList.contains('processed-dual-lang')) {
-                                    processSlashSeparatedText(label, text);
-                                    label.classList.add('processed-dual-lang');
-                                    label.classList.add('dual-lang-text');
-                                }
-                            } else {
-                                // 単一言語のテキストの場合、キーを検索して翻訳
-                                const key = getKeyFromText(text);
-                                if (key && translations[window.currentLang][key]) {
-                                    label.textContent = translations[window.currentLang][key];
-                                }
-                            }
-                        });
-                        
-                        // ボタン要素の特別処理
-                        const startBtn = document.querySelector('#start-button');
-                        if (startBtn) {
-                            startBtn.textContent = translations[window.currentLang].start_generation;
-                        }
-                        
-                        const stopBtn = document.querySelector('#stop-button');
-                        if (stopBtn) {
-                            stopBtn.textContent = translations[window.currentLang].stop_generation;
-                        }
-                        
-                        // チェックボックスの情報テキスト
-                        const infoTexts = document.querySelectorAll('.wrap p, .checkbox-container .wrap p');
-                        infoTexts.forEach(info => {
-                            const text = info.textContent.trim();
-                            if (text.includes('/')) {
-                                if (!info.classList.contains('processed-dual-lang')) {
-                                    processSlashSeparatedText(info, text);
-                                    info.classList.add('processed-dual-lang');
-                                    info.classList.add('dual-lang-text');
-                                }
-                            } else {
-                                // TeaCacheのinfo文字列を特別に検出
-                                if (text.includes('指や手の生成品質') || text.includes('finger and hand generation')) {
-                                    info.textContent = translations[window.currentLang].teacache_info;
-                                }
-                            }
-                        });
-                        
-                        // エラーメッセージ処理
-                        document.querySelectorAll('[data-lang]').forEach(el => {
-                            el.style.display = el.getAttribute('data-lang') === window.currentLang ? 'block' : 'none';
-                        });
-                    }
-                    
-                    // スラッシュ区切りテキストを処理して、言語ごとの要素を作成
-                    function processSlashSeparatedText(element, text) {
-                        // テキストをスラッシュで分割
-                        const parts = text.split('/');
-                        let jaText = parts[0].trim();
-                        let enText = parts.length > 1 ? parts[1].trim() : '';
-                        
-                        // 親要素を取得
-                        const parent = element.parentNode;
-                        
-                        // 言語ごとの要素を作成
-                        const jaElement = document.createElement('span');
-                        jaElement.textContent = jaText;
-                        jaElement.classList.add('lang-ja');
-                        
-                        const enElement = document.createElement('span');
-                        enElement.textContent = enText;
-                        enElement.classList.add('lang-en');
-                        
-                        // オリジナル要素の直後に挿入
-                        insertAfter(jaElement, element);
-                        insertAfter(enElement, jaElement);
-                    }
-                    
-                    // 要素の後に新しい要素を挿入するヘルパー関数
-                    function insertAfter(newElement, referenceElement) {
-                        referenceElement.parentNode.insertBefore(newElement, referenceElement.nextSibling);
-                    }
-                    
-                    // テキストからキーを取得する関数
-                    function getKeyFromText(text) {
-                        if (!text) return null;
-                        
-                        // 複合テキスト（「日本語 / English」形式）を処理
-                        if (text.includes('/')) {
-                            const parts = text.split('/');
-                            const jaText = parts[0].trim();
-                            const enText = parts.length > 1 ? parts[1].trim() : '';
-                            
-                            // 日本語テキストからキーを検索
-                            for (const [key, value] of Object.entries(translations.ja)) {
-                                if (value === jaText) return key;
-                            }
-                            
-                            // 英語テキストからキーを検索
-                            for (const [key, value] of Object.entries(translations.en)) {
-                                if (value === enText) return key;
-                            }
-                        }
-                        
-                        // 単一言語テキストからキーを検索
-                        for (const [key, value] of Object.entries(translations.ja)) {
-                            if (value === text) return key;
-                        }
-                        
-                        for (const [key, value] of Object.entries(translations.en)) {
-                            if (value === text) return key;
-                        }
-                        
-                        return null;
-                    }
-                    
-                    // Gradioの要素が完全に読���込まれるまで少し待ってから実行
-                    function initializeLanguage() {
-                        console.log('言語初期化処理を実行します');
-                        
-                        // デフォルト言語を設定
-                        document.body.classList.add(`lang-${window.currentLang}`);
-                        document.body.classList.add('lang-initialized');
-                        
-                        // 翻訳を適用
-                        applyTranslations();
-                    }
-                    
-                    // 初期化を3回試行（Gradioの読み込みタイミングに合わせるため）
-                    setTimeout(initializeLanguage, 1000);
-                    setTimeout(initializeLanguage, 2000);
-                    setTimeout(initializeLanguage, 3000);
-                    
-                    // MutationObserverでDOM変更を監視し、新しい要素にも翻訳を適用
-                    const observer = new MutationObserver(function(mutations) {
-                        let shouldUpdate = false;
-                        
-                        mutations.forEach(function(mutation) {
-                            if (mutation.addedNodes.length) {
-                                shouldUpdate = true;
-                            }
-                        });
-                        
-                        if (shouldUpdate) {
-                            setTimeout(applyTranslations, 100);
-                        }
-                    });
-                    
-                    // 監視設定
-                    observer.observe(document.body, {
-                        childList: true,
-                        subtree: true
-                    });
-                });
-            </script>
-        </div>
-    """)
-    
     # タイトルにはJavaScriptで切り替えられるようにdata-i18n属性を使用
     gr.HTML("<h1 data-i18n='title'>FramePack - 画像から動画生成</h1>")
     
@@ -1713,67 +1344,3 @@ with block:
 
 block.launch() 
 
-# わかりやすいエラー表示HTMLを作成
-def create_error_html(error_msg, is_timeout=False):
-    """二言語のエラーメッセージHTMLを作成"""
-    # より親切な日英両言語のエラーメッセージを提供
-    en_msg = ""
-    ja_msg = ""
-    
-    if is_timeout:
-        en_msg = "Processing timed out, but partial video may have been generated" if "部分的な動画" in error_msg else f"Processing timed out: {error_msg}"
-        ja_msg = "処理がタイムアウトしましたが、部分的な動画は生成されている可能性があります" if "部分的な動画" in error_msg else f"処理がタイムアウトしました: {error_msg}"
-    elif "モデル読み込み失敗" in error_msg:
-        en_msg = "Failed to load models. The Space may be experiencing high traffic or GPU issues."
-        ja_msg = "モデルの読み込みに失敗しました。Spaceの利用が集中しているか、GPU関連の問題が発生している可能性があります。"
-    elif "GPU" in error_msg or "CUDA" in error_msg or "メモリ" in error_msg or "memory" in error_msg:
-        en_msg = "GPU memory insufficient or GPU error. Try increasing GPU memory preservation value or reduce video length."
-        ja_msg = "GPUメモリが不足しているかGPUエラーが発生しています。GPU推論保存メモリの値を大きくするか、動画の長さを短くしてください。"
-    elif "サンプリング中にエラー" in error_msg:
-        if "部分" in error_msg:
-            en_msg = "Error during sampling process, but partial video has been generated."
-            ja_msg = "サンプリング中にエラーが発生しましたが、部分的な動画は生成されています。"
-        else:
-            en_msg = "Error during sampling process. Unable to generate video."
-            ja_msg = "サンプリング中にエラーが発生し、動画を生成できませんでした。"
-    elif "モデルダウンロードタイムアウト" in error_msg or "ネットワーク接続不安定" in error_msg or "ReadTimeoutError" in error_msg or "ConnectionError" in error_msg:
-        en_msg = "Network connection is unstable, model download timed out. Please try again later."
-        ja_msg = "ネットワーク接続が不安定で、モデルのダウンロードがタイムアウトしました。後ほど再試行してください。"
-    elif "VAE" in error_msg or "デコード" in error_msg or "decode" in error_msg:
-        en_msg = "Error during video decoding or saving process. Try again with a different seed."
-        ja_msg = "動画のデコードまたは保存中にエラーが発生しました。別のシード値で再試行してください。"
-    else:
-        en_msg = f"Processing error: {error_msg}"
-        ja_msg = f"処理中にエラーが発生しました: {error_msg}"
-    
-    # 二言語エラーメッセージHTML - 便利なアイコンを追加し、CSSスタイルが適用されることを確認
-    return f"""
-    <div class="error-message" id="custom-error-container">
-        <div class="error-msg-en" data-lang="en">
-            <span class="error-icon">⚠️</span> {en_msg}
-        </div>
-        <div class="error-msg-ja" data-lang="ja">
-            <span class="error-icon">⚠️</span> {ja_msg}
-        </div>
-    </div>
-    <script>
-        // 現在の言語に基づいて適切なエラーメッセージを表示
-        (function() {{
-            const errorContainer = document.getElementById('custom-error-container');
-            if (errorContainer) {{
-                const currentLang = window.currentLang || 'ja'; // デフォルトは日本語
-                const errMsgs = errorContainer.querySelectorAll('[data-lang]');
-                errMsgs.forEach(msg => {{
-                    msg.style.display = msg.getAttribute('data-lang') === currentLang ? 'block' : 'none';
-                }});
-                
-                // GradioのデフォルトエラーUIが表示されないことを確認
-                const defaultErrorElements = document.querySelectorAll('.error');
-                defaultErrorElements.forEach(el => {{
-                    el.style.display = 'none';
-                }});
-            }}
-        }})();
-    </script>
-    """
-