Update app.py

app.py

@@ -1032,10 +1032,6 @@ if IN_HF_SPACE and 'spaces' in globals():
     
     process = process_with_gpu
 else:
-
-
-
-
     def process(input_image, prompt, n_prompt, seed, total_second_length, use_teacache):
         global stream
         assert input_image is not None, '入力画像がありません！'
@@ -1047,8 +1043,6 @@ else:
         rs = 0.0
         gpu_memory_preservation = 6
 
-
-
         # UI状態の初期化
         yield None, None, '', '', gr.update(interactive=False), gr.update(interactive=True)
 
@@ -1169,19 +1163,16 @@ def make_custom_css():
         margin: 0 auto;
     }
     
-    /* 言語切り替えボタンのスタイル */
-    #language-toggle {
-        position: fixed;
-        top: 10px;
-        right: 10px;
-        z-index: 1000;
-        background-color: rgba(0, 0, 0, 0.7);
-        color: white;
-        border: none;
-        border-radius: 4px;
-        padding: 5px 10px;
-        cursor: pointer;
-        font-size: 14px;
+    /* 言語切り替えボタンのスタイル - CSSは自動生成されるので不要です */
+    
+    /* 言語切り替え用のクラス */
+    body.lang-ja .lang-en,
+    body.lang-en .lang-ja {
+        display: none !important;
+    }
+    
+    body.lang-initialized .dual-lang-text {
+        display: none !important;
     }
     
     /* ページタイトルのスタイル */
@@ -1328,22 +1319,36 @@ with block:
     # 言語切り替え機能を追加
     gr.HTML("""
         <div id="app-container">
-            <button id="language-toggle" onclick="toggleLanguage()">日本語/English</button>
-        </div>
-        <script>
-            // グローバル変数、現在の言語を保存
-            window.currentLang = "ja";
-            
-            // 言語切り替え関数
-            function toggleLanguage() {
-                window.currentLang = window.currentLang === "en" ? "ja" : "en";
-                
-                // data-i18n属性を持つすべての要素を取得
-                const elements = document.querySelectorAll('[data-i18n]');
-                
-                // 言語に基づいて切り替え
-                elements.forEach(el => {
-                    const key = el.getAttribute('data-i18n');
+            <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",
@@ -1356,8 +1361,10 @@ with block:
                             "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",
@@ -1378,9 +1385,10 @@ with block:
                             "teacache_info": "処理速度が速くなりますが、指や手の生成品質が若干低下する可能性があります。",
                             "negative_prompt": "ネガティブプロンプト",
                             "seed": "シード値",
-                            "video_length": "動画の長さ（最大5秒）",
+                            "video_length": "動画の長さ（最大1秒）",
                             "next_latents": "次の潜在変数",
                             "generated_video": "生成された動画",
+                            "preview": "プレビュー",
                             "sampling_note": "注意：逆順サンプリングのため、終了動作が開始動作より先に生成されます。開始動作が動画に表示されていない場合は、しばらくお待ちください。後で生成されます。",
                             "error_message": "エラーメッセージ",
                             "processing_error": "処理中にエラーが発生しました",
@@ -1392,67 +1400,202 @@ with block:
                         }
                     };
                     
-                    if (translations[window.currentLang] && translations[window.currentLang][key]) {
-                        // 要素の種類に基づいてテキストを設定
-                        if (el.tagName === 'BUTTON') {
-                            el.textContent = translations[window.currentLang][key];
-                        } else if (el.tagName === 'LABEL') {
-                            el.textContent = translations[window.currentLang][key];
-                        } else {
-                            el.innerHTML = translations[window.currentLang][key];
+                    // 言語切り替えボタンを作成
+                    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;
                     }
-                });
-                
-                // ページ上の他の要素を更新
-                document.querySelectorAll('.bilingual-label').forEach(el => {
-                    const enText = el.getAttribute('data-en');
-                    const jaText = el.getAttribute('data-ja');
-                    el.textContent = window.currentLang === 'en' ? enText : jaText;
-                });
-                
-                // エラーメッセージコンテナの処理
-                document.querySelectorAll('[data-lang]').forEach(el => {
-                    el.style.display = el.getAttribute('data-lang') === window.currentLang ? 'block' : 'none';
-                });
-            }
-            
-            // ページロード後の初期化
-            document.addEventListener('DOMContentLoaded', function() {
-                // 国際化が必要な要素にdata-i18n属性を追加
-                setTimeout(() => {
-                    // すべてのラベルにi18n属性を追加
-                    const labelMap = {
-                        "Upload Image": "upload_image",
-                        "画像をアップロード": "upload_image",
-                        "Prompt": "prompt",
-                        "プロンプト": "prompt",
-                        "Quick Prompts": "quick_prompts",
-                        "クイックプロンプト一覧": "quick_prompts",
-                        "Generate": "start_generation", 
-                        "生成開始": "start_generation",
-                        "Stop": "stop_generation",
-                        "停止": "stop_generation",
-                        // 他のラベルマッピングを追加...
-                    };
                     
-                    // ラベルの処理
-                    document.querySelectorAll('label, span, button').forEach(el => {
-                        const text = el.textContent.trim();
-                        if (labelMap[text]) {
-                            el.setAttribute('data-i18n', labelMap[text]);
+                    // 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);
                         }
                     });
                     
-                    // 特定の要素にi18n属性を追加
-                    const titleEl = document.querySelector('h1');
-                    if (titleEl) titleEl.setAttribute('data-i18n', 'title');
-                    
-                    // ラベル言語の初期化
-                    toggleLanguage();
-                }, 1000);
-            });
-        </script>
+                    // 監視設定
+                    observer.observe(document.body, {
+                        childList: true,
+                        subtree: true
+                    });
+                });
+            </script>
+        </div>
     """)
     
     # タイトルにはJavaScriptで切り替えられるようにdata-i18n属性を使用
@@ -1561,7 +1704,7 @@ with block:
             error_message = gr.HTML('', elem_id='error-message', visible=True)
     
     # 処理関数
-    ips = [input_image, prompt, n_prompt, seed, total_second_length,use_teacache]
+    ips = [input_image, prompt, n_prompt, seed, total_second_length, use_teacache]
     
     # 開始と終了ボタンのイベント
     start_button.click(fn=process, inputs=ips, outputs=[result_video, preview_image, progress_desc, progress_bar, start_button, end_button])
@@ -1633,4 +1776,4 @@ def create_error_html(error_msg, is_timeout=False):
         }})();
     </script>
     """
-        
+