feedback

app.py

@@ -6,9 +6,9 @@ import base64
 from scripts.process_utils import initialize, process_image_as_base64, image_to_base64
 from scripts.anime import init_model
 from scripts.generate_prompt import load_wd14_tagger_model
-# import webbrowser
 from datetime import datetime
 from pytz import timezone
+from scripts.survey import handle_form_submission, handle_visit_choice, handle_proceed, localize, script, generate_image, send_feedback
 
 # 初期化
 initialize(_use_local=False, use_gpu=True, use_dotenv=True)
@@ -19,13 +19,17 @@ def process_image(input_image, mode, weight1=None, weight2=None):
     tokyo_time = datetime.now(timezone('Asia/Tokyo')).strftime("%Y-%m-%d %H:%M:%S")  # 日本時間のタイムスタンプ
     print(f"[{tokyo_time}] Processing image with mode={mode}, weight1={weight1}, weight2={weight2}")
 
+    # feedback用のファイル名
+    tokyo_time = datetime.now(timezone('Asia/Tokyo')).strftime("%Y%m%d_%H%M%S")
+    filename = f"{tokyo_time}_mode={mode}_weight1={weight1}_weight2={weight2}.png"
+
     # 既存の画像処理ロジック
     if mode == "original":
         sotai_image, sketch_image = process_image_as_base64(input_image, mode, None, None)
     elif mode == "refine":
         sotai_image, sketch_image = process_image_as_base64(input_image, mode, weight1, weight2)
 
-    return sotai_image, sketch_image, None
+    return sotai_image, sketch_image, filename
 
 def mix_images(sotai_image_data, sketch_image_data, opacity1, opacity2):
     sotai_image = Image.open(io.BytesIO(base64.b64decode(sotai_image_data))).convert('RGBA')
@@ -44,155 +48,6 @@ def mix_images(sotai_image_data, sketch_image_data, opacity1, opacity2):
 
     return mixed_image
 
-# # X(Twitter)に投稿するリンクを生成
-# def generate_twitter_link(image):
-#     image_base64 = image_to_base64(image)
-#     return f"https://twitter.com/intent/tweet?text=Image2Body&url={image_base64} #Image2Body"
-
-# def post_to_twitter(image):
-#     link = generate_twitter_link(image)
-#     webbrowser.open_new_tab(link)
-
-import gradio as gr
-
-# 初回訪問のメッセージ
-welcome_message = """
-<h2>このサービスは初めてご利用ですか？</h2>
-<p>以下から選択してください。</p>
-"""
-
-from dotenv import load_dotenv
-load_dotenv()
-
-# Googleフォームの送信URL
-apps_script_url = os.environ["APPS_SCRIPT_URL"]
-
-# ローカライズ用辞書
-translations = {
-    "en": {
-        "welcome_message": "<h2>Is this your first time using this service?</h2><p>Please select below.</p>",
-        "visit_choices": ["First time", "Returning"],
-        "returning_message": "<h2>Thank you for returning!</h2><p>Click the button below to proceed.</p>",
-        "proceed_button": "Proceed",
-        "survey_title": "<h2>Please answer the survey</h2><p>Fill out the form below and submit.</p>",
-        "form": {
-            "source": "1. Where did you learn about this Space?",
-            "country": "2. Which country or region do you live in?",
-            "ai_usage": "3. Have you used AI to generate illustrations?",
-            "ai_usage_choices": ["Select...", "Frequently", "Sometimes", "Never"],
-            "drawing_experience": "4. Have you practiced traditional hand-drawn illustrations?",
-            "drawing_experience_choices": ["Select...", "As a hobby", "For work", "Never"],
-            "issues": "5. (Optional) Tell us about any challenges you've faced while practicing illustrations.",
-            "interest": "6. (Optional) What interested you in this Space?",
-            "contact_info": "7. (Optional) Provide your contact information (e.g., SNS, URL, email)",
-            "contact_info_placeholder": "e.g., Twitter, portfolio URL, email",
-            "submit_button": "Submit"
-        }
-    },
-    "ja": {
-        "welcome_message": "<h2>このサービスは初めてご利用ですか？</h2><p>以下から選択してください。</p>",
-        "visit_choices": ["初めて利用する", "2回目以降"],
-        "returning_message": "<h2>再訪ありがとうございます！</h2><p>以下のボタンをクリックして進んでください。</p>",
-        "proceed_button": "進む",
-        "survey_title": "<h2>アンケートにご回答ください</h2><p>以下のフォームに入力して送信してください。</p>",
-        "form": {
-            "source": "1. このSpaceをどこで知りましたか？",
-            "country": "2. お住まいの国や地域を教えてください。",
-            "ai_usage": "3. 生成AIでイラスト生成をしたことがありますか？",
-            "ai_usage_choices": ["選択してください...", "よくする", "ある", "ない"],
-            "drawing_experience": "4. 生成AIではない従来の手描きイラストを練習した経験はありますか？",
-            "drawing_experience_choices": ["選択してください...", "趣味で", "仕事で", "ない"],
-            "issues": "5. （任意）イラストの練習中に困った経験があれば教えてください",
-            "interest": "6. （��意）このSpaceに興味を持った理由を教えてください。",
-            "contact_info": "7. （任意）連絡先（SNS、URL、メールアドレスなど）を教えてください",
-            "contact_info_placeholder": "例: Twitterアカウント、ポートフォリオURL、メールアドレスなど",
-            "submit_button": "送信"
-        }
-    },
-    "zh": {
-        "welcome_message": "<h2>这是您第一次使用此服务吗？</h2><p>请从下面选择。</p>",
-        "visit_choices": ["第一次", "再次访问"],
-        "returning_message": "<h2>感谢您的再次访问！</h2><p>请点击下面的按钮继续。</p>",
-        "proceed_button": "继续",
-        "survey_title": "<h2>请回答问卷</h2><p>填写以下表格并提交。</p>",
-        "form": {
-            "source": "1. 您是从哪里得知此服务的？",
-            "country": "2. 您居住的国家或地区是？",
-            "ai_usage": "3. 您是否使用过AI生成插图？",
-            "ai_usage_choices": ["请选择...", "经常", "偶尔", "从未"],
-            "drawing_experience": "4. 您是否练习过传统手绘插图？",
-            "drawing_experience_choices": ["请选择...", "作为爱好", "为了工作", "从未"],
-            "issues": "5. （可选）在练习插图过程中遇到的挑战是什么？",
-            "interest": "6. （可选）是什么让您对这个Space感兴趣？",
-            "contact_info": "7. （可选）提供您的联系方式（如：SNS、网址、电子邮件等）",
-            "contact_info_placeholder": "例如：Twitter、作品集网址、电子邮件",
-            "submit_button": "提交"
-        }
-    }
-}
-
-# 言語選択に応じてローカライズ
-def localize(language):
-    t = translations[language]
-    return {
-        "welcome_message": t["welcome_message"],
-        "visit_choices": t["visit_choices"],
-        "returning_message": t["returning_message"],
-        "proceed_button": t["proceed_button"],
-        "form_html": f"""
-        <h2>{t['survey_title']}</h2>
-            <form id="survey-form" action="{apps_script_url}" method="POST" target="hidden_iframe">
-            <label for="source">{t['form']['source']}</label><br>
-            <input type="text" name="source" id="source" required><br><br>
-
-            <label for="country">{t['form']['country']}</label><br>
-            <input type="text" name="country" id="country" required><br><br>
-
-            <label for="ai_usage">{t['form']['ai_usage']}</label><br>
-            <select name="ai_usage" id="ai_usage" required>
-                <option value="" selected disabled>{t['form']['ai_usage_choices'][0]}</option>
-                {"".join([f'<option value="{choice}">{choice}</option>' for choice in t['form']['ai_usage_choices'][1:]])}
-            </select><br><br>
-
-            <label for="drawing_experience">{t['form']['drawing_experience']}</label><br>
-            <select name="drawing_experience" id="drawing_experience" required>
-                <option value="" selected disabled>{t['form']['drawing_experience_choices'][0]}</option>
-                {"".join([f'<option value="{choice}">{choice}</option>' for choice in t['form']['drawing_experience_choices'][1:]])}
-            </select><br><br>
-
-            <label for="issues">{t['form']['issues']}</label><br>
-            <textarea name="issues" id="issues"></textarea><br><br>
-
-            <label for="interest">{t['form']['interest']}</label><br>
-            <textarea name="interest" id="interest"></textarea><br><br>
-
-            <label for="contact_info">{t['form']['contact_info']}</label><br>
-            <input type="text" name="contact_info" id="contact_info" placeholder="{t['form']['contact_info_placeholder']}"><br><br>
-
-            <button type="submit" id="submit-button">{t['form']['submit_button']}</button>
-        </form>
-        <iframe name="hidden_iframe" style="display:none;"></iframe>
-        """
-    }
-
-# 初回訪問の選択肢に応じた処理
-def handle_visit_choice(choice, language):
-    if choice == localize(language)["visit_choices"][0]:
-        return gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)
-    else:
-        return gr.update(visible=False), gr.update(visible=False), gr.update(visible=True)
-
-# フォーム送信後の処理
-def handle_form_submission(flag_value):
-    print("form submitted")
-    return gr.update(visible=False), gr.update(visible=True)
-
-# 進むボタンを押した後の処理
-def handle_proceed():
-    print("more than once")
-    return gr.update(visible=False), gr.update(visible=True)
-
-
 with gr.Blocks() as demo:
     form_visible_flag = gr.Textbox(value="false", elem_id="form_flag", visible=False)
     # title
@@ -289,22 +144,23 @@ with gr.Blocks() as demo:
                 mixed_image = gr.Image(label="Output Image", elem_id="output_image")
                 opacity_slider1 = gr.Slider(0, 1, value=0.5, step=0.05, label="Opacity (Sotai)")
                 opacity_slider2 = gr.Slider(0, 1, value=0.5, step=0.05, label="Opacity (Sketch)")
-                # post_button = gr.Button("Post to X(Twitter)", variant="secondary")
-                # post_button.click(
-                #     post_to_twitter,
-                #     inputs=[mixed_image],
-                #     outputs=None
-                # )
+                send_filename = gr.Textbox(label="Feedback", visible=False)
+                gr.HTML("<h3>Send Feedback Image/画像を送信</h3>")
+                gr.HTML("<p>Images are used only for developer review and will not be shared.</p>")
+                gr.HTML("<p>画像は開発者が確認するためだけに使用され、公開されません。</p>")
+                send_feedback_button = gr.Button("Contribute as Feedback to Developer/開発者へのフィードバックとして協力する")
+                feed_back_result = gr.Textbox(label="Feedback Result")
+
 
         original_submit.click(
             process_image,
             inputs=[input_image, original_mode],
-            outputs=[sotai_image_data, sketch_image_data, mixed_image]
+            outputs=[sotai_image_data, sketch_image_data, send_filename]
         )
         refine_submit.click(
             process_image,
             inputs=[input_image, refine_input[0], refine_input[1], refine_input[2]],
-            outputs=[sotai_image_data, sketch_image_data, mixed_image]
+            outputs=[sotai_image_data, sketch_image_data, send_filename]
         )
         sotai_image_data.change(
             mix_images,
@@ -342,38 +198,14 @@ with gr.Blocks() as demo:
         inputs=[],
         outputs=[proceed_section, main_section]
     )
+    
+    send_feedback_button.click(
+        send_feedback,
+        inputs=[mixed_image, send_filename],
+        outputs=[feed_back_result],
+    )
 
     # JavaScriptの読み込み
-    demo.load(None, None, None, js="""
-() => {
-    function attachFormListener() {
-        const form = document.getElementById("survey-form");
-        if (form) {
-            function submitForm() {
-                
-                console.log('form submitted');
-                
-                const flagInput = document.querySelector("#form_flag textarea");
-                flagInput.value = 'true';
-                flagInput.dispatchEvent(new Event('input'));
-            }
-            // イベントを削除
-            form.removeEventListener("submit", submitForm);
-            // イベントを追加
-            form.addEventListener("submit", submitForm);
-        }
-    }
-
-    // 初期ロード時にイベントリスナーを設定
-    attachFormListener();
-
-    // DOMが動的に更新された場合にもイベントリスナーを再設定
-    const observer = new MutationObserver(() => {
-        attachFormListener();
-    });
-
-    observer.observe(document.body, { childList: true, subtree: true });
-}
-""")
+    demo.load(None, None, None, js=script)
 
 demo.launch()

scripts/survey.py

@@ -0,0 +1,208 @@
+import gradio as gr
+import os
+from dotenv import load_dotenv
+from PIL import Image
+import io
+import base64
+import requests
+from datetime import datetime
+from pytz import timezone
+import numpy as np
+
+load_dotenv()
+
+# 初回訪問のメッセージ
+welcome_message = """
+<h2>このサービスは初めてご利用ですか？</h2>
+<p>以下から選択してください。</p>
+"""
+
+# Googleフォームの送信URL
+apps_script_url = os.environ["APPS_SCRIPT_URL"]
+
+# ローカライズ用辞書
+translations = {
+    "en": {
+        "welcome_message": "<h2>Is this your first time using this service?</h2><p>Please select below.</p>",
+        "visit_choices": ["First time", "Returning"],
+        "returning_message": "<h2>Thank you for returning!</h2><p>Click the button below to proceed.</p>",
+        "proceed_button": "Proceed",
+        "survey_title": "<h2>Please answer the survey</h2><p>Fill out the form below and submit.</p>",
+        "form": {
+            "source": "1. Where did you learn about this Space?",
+            "country": "2. Which country or region do you live in?",
+            "ai_usage": "3. Have you used AI to generate illustrations?",
+            "ai_usage_choices": ["Select...", "Frequently", "Sometimes", "Never"],
+            "drawing_experience": "4. Have you practiced traditional hand-drawn illustrations?",
+            "drawing_experience_choices": ["Select...", "As a hobby", "For work", "Never"],
+            "issues": "5. (Optional) Tell us about any challenges you've faced while practicing illustrations.",
+            "interest": "6. (Optional) What interested you in this Space?",
+            "contact_info": "7. (Optional) Provide your contact information (e.g., SNS, URL, email)",
+            "contact_info_placeholder": "e.g., Twitter, portfolio URL, email",
+            "submit_button": "Submit"
+        }
+    },
+    "ja": {
+        "welcome_message": "<h2>このサービスは初めてご利用ですか？</h2><p>以下から選択してください。</p>",
+        "visit_choices": ["初めて利用する", "2回目以降"],
+        "returning_message": "<h2>再訪ありがとうございます！</h2><p>以下のボタンをクリックして進んでください。</p>",
+        "proceed_button": "進む",
+        "survey_title": "<h2>アンケートにご回答ください</h2><p>以下のフォームに入力して送信してください。</p>",
+        "form": {
+            "source": "1. このSpaceをどこで知りましたか？",
+            "country": "2. お住まいの国や地域を教えてください。",
+            "ai_usage": "3. 生成AIでイラスト生成をしたことがありますか？",
+            "ai_usage_choices": ["選択してください...", "よくする", "ある", "ない"],
+            "drawing_experience": "4. 生成AIではない従来の手描きイラストを練習した経験はありますか？",
+            "drawing_experience_choices": ["選択してください...", "趣味で", "仕事で", "ない"],
+            "issues": "5. （任意）イラストの練習中に困った経験があれば教えてください",
+            "interest": "6. （任意）このSpaceに興味を持った理由を教えてください。",
+            "contact_info": "7. （任意）連絡先（SNS、URL、メールアドレスなど）を教えてください",
+            "contact_info_placeholder": "例: Twitterアカウント、ポートフォリオURL、メールアドレスなど",
+            "submit_button": "送信"
+        }
+    },
+    "zh": {
+        "welcome_message": "<h2>这是您第一次使用此服务吗？</h2><p>请从下面选择。</p>",
+        "visit_choices": ["第一次", "再次访问"],
+        "returning_message": "<h2>感谢您的再次访问！</h2><p>请点击下面的按钮继续。</p>",
+        "proceed_button": "继续",
+        "survey_title": "<h2>请回答问卷</h2><p>填写以下表格并提交。</p>",
+        "form": {
+            "source": "1. 您是从哪里得知此服务的？",
+            "country": "2. 您居住的国家或地区是？",
+            "ai_usage": "3. 您是否使用过AI生成插图？",
+            "ai_usage_choices": ["请选择...", "经常", "偶尔", "从未"],
+            "drawing_experience": "4. 您是否练习过传统手绘插图？",
+            "drawing_experience_choices": ["请选择...", "作为爱好", "为了工作", "从未"],
+            "issues": "5. （可选）在练习插图过程中遇到的挑战是什么？",
+            "interest": "6. （可选）是什么让您对这个Space感兴趣？",
+            "contact_info": "7. （可选）提供您的联系方式（如：SNS、网址、电子邮件等）",
+            "contact_info_placeholder": "例如：Twitter、作品集网址、电子邮件",
+            "submit_button": "提交"
+        }
+    }
+}
+
+# 言語選択に応じてローカライズ
+def localize(language):
+    t = translations[language]
+    return {
+        "welcome_message": t["welcome_message"],
+        "visit_choices": t["visit_choices"],
+        "returning_message": t["returning_message"],
+        "proceed_button": t["proceed_button"],
+        "form_html": f"""
+        <h2>{t['survey_title']}</h2>
+            <form id="survey-form" action="{apps_script_url}" method="POST" target="hidden_iframe">
+            <label for="source">{t['form']['source']}</label><br>
+            <input type="text" name="source" id="source" required><br><br>
+
+            <label for="country">{t['form']['country']}</label><br>
+            <input type="text" name="country" id="country" required><br><br>
+
+            <label for="ai_usage">{t['form']['ai_usage']}</label><br>
+            <select name="ai_usage" id="ai_usage" required>
+                <option value="" selected disabled>{t['form']['ai_usage_choices'][0]}</option>
+                {"".join([f'<option value="{choice}">{choice}</option>' for choice in t['form']['ai_usage_choices'][1:]])}
+            </select><br><br>
+
+            <label for="drawing_experience">{t['form']['drawing_experience']}</label><br>
+            <select name="drawing_experience" id="drawing_experience" required>
+                <option value="" selected disabled>{t['form']['drawing_experience_choices'][0]}</option>
+                {"".join([f'<option value="{choice}">{choice}</option>' for choice in t['form']['drawing_experience_choices'][1:]])}
+            </select><br><br>
+
+            <label for="issues">{t['form']['issues']}</label><br>
+            <textarea name="issues" id="issues"></textarea><br><br>
+
+            <label for="interest">{t['form']['interest']}</label><br>
+            <textarea name="interest" id="interest"></textarea><br><br>
+
+            <label for="contact_info">{t['form']['contact_info']}</label><br>
+            <input type="text" name="contact_info" id="contact_info" placeholder="{t['form']['contact_info_placeholder']}"><br><br>
+
+            <button type="submit" id="submit-button">{t['form']['submit_button']}</button>
+        </form>
+        <iframe name="hidden_iframe" style="display:none;"></iframe>
+        """
+    }
+
+# 初回訪問の選択肢に応じた処理
+def handle_visit_choice(choice, language):
+    if choice == localize(language)["visit_choices"][0]:
+        return gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)
+    else:
+        return gr.update(visible=False), gr.update(visible=False), gr.update(visible=True)
+
+# フォーム送信後の処理
+def handle_form_submission(flag_value):
+    print("form submitted")
+    return gr.update(visible=False), gr.update(visible=True)
+
+# 進むボタンを押した後の処理
+def handle_proceed():
+    print("more than once")
+    return gr.update(visible=False), gr.update(visible=True)
+
+script = """
+() => {
+    function attachFormListener() {
+        const form = document.getElementById("survey-form");
+        if (form) {
+            function submitForm() {
+                
+                console.log('form submitted');
+                
+                const flagInput = document.querySelector("#form_flag textarea");
+                flagInput.value = 'true';
+                flagInput.dispatchEvent(new Event('input'));
+            }
+            // イベントを削除
+            form.removeEventListener("submit", submitForm);
+            // イベントを追加
+            form.addEventListener("submit", submitForm);
+        }
+    }
+
+    // 初期ロード時にイベントリスナーを設定
+    attachFormListener();
+
+    // DOMが動的に更新された場合にもイベントリスナーを再設定
+    const observer = new MutationObserver(() => {
+        attachFormListener();
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+}
+"""
+
+# Google Apps ScriptのURL
+feedback_script_url = "https://script.google.com/macros/s/AKfycbzg2Eqn-vhJABTRTSLiikDlXPuqC2FSk3_qYZMUkJ4oOeSbroEkQ4ZBspIO04bfymUfSA/exec"
+
+# 画像生成パラメータ
+def generate_image(mode, weight1, weight2):
+    # ダミーの画像生成処理
+    image = Image.new("RGB", (256, 256), color=(int(255*weight1), int(255*weight2), int(255*weight1*weight2)))
+    return image
+
+# Google Driveに保存する処理
+def send_feedback(image, filename):
+    # numpy.ndarray を PIL.Image に変換
+    if isinstance(image, np.ndarray):
+        image = Image.fromarray(image)
+    # 画像をBase64にエンコード
+    buffered = io.BytesIO()
+    image.save(buffered, format="PNG")
+    img_str = base64.b64encode(buffered.getvalue()).decode()
+
+    # Google Apps Scriptに送信
+    response = requests.post(
+        feedback_script_url,
+        json={"image": img_str, "filename": filename}
+    )
+    
+    if response.status_code == 200:
+        return gr.update(value="Thank you for cooperation!/ご協力ありがとうございます！", interactive=False)
+    else:
+        return gr.update(value="Failed to send. Try again./送信に失敗しました。もう一度お試しください。", interactive=True)