Update app.py

app.py

@@ -1,4 +1,5 @@
 import urllib.parse
+import json
 import gradio as gr
 
 # -------------------------------------------------
@@ -247,7 +248,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                 '''
             html_items += '</div>'
 
-            # ------------- React Controlled Input Hack -------------
+            # ---------- React Controlled Input Hack (JS) ----------
             hack_js = """
             function updateReactValue(el,newVal){
               if(!el)return;
@@ -274,29 +275,29 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             }
             """
 
-            # 예제 클릭 시 자동 채우기
-            apply_example_js = f"""
-            <script>
-            {hack_js}
-            const examples={examples};
-            function applyExample(i){{
-              const ex=examples[i];
-              const labelBox=document.querySelector("#label-input textarea,#label-input input");
-              if(labelBox)updateReactValue(labelBox,ex[0]);
-              const msgBox=document.querySelector("#message-input textarea,#message-input input");
-              if(msgBox)updateReactValue(msgBox,ex[1]);
-              setColorValue("color-input",convertToHexIfNeeded(ex[2]));
-              setColorValue("label-color-input",convertToHexIfNeeded(ex[3]));
-              const logoBox=document.querySelector("#logo-input textarea,#logo-input input");
-              if(logoBox)updateReactValue(logoBox,ex[4]);
-              setColorValue("logo-color-input",convertToHexIfNeeded(ex[5]));
-              const styleSel=document.querySelector("#style-input select");
-              if(styleSel){styleSel.value=ex[6];styleSel.dispatchEvent(new Event("change",{bubbles:true}));}
-              const linkBox=document.querySelector("#link-input textarea,#link-input input");
-              if(linkBox)updateReactValue(linkBox,ex[7]);
-            }}
-            </script>
-            """
+            # ---------- 예제 클릭 시 자동 채우기 스크립트 ----------
+            apply_example_js = (
+                "<script>\n"
+                + hack_js + "\n"
+                + "const examples = " + json.dumps(examples) + ";\n"
+                + "function applyExample(i) {\n"
+                + "  const ex = examples[i];\n"
+                + "  const labelBox=document.querySelector(\"#label-input textarea,#label-input input\");\n"
+                + "  if(labelBox) updateReactValue(labelBox,ex[0]);\n"
+                + "  const msgBox=document.querySelector(\"#message-input textarea,#message-input input\");\n"
+                + "  if(msgBox) updateReactValue(msgBox,ex[1]);\n"
+                + "  setColorValue(\"color-input\",convertToHexIfNeeded(ex[2]));\n"
+                + "  setColorValue(\"label-color-input\",convertToHexIfNeeded(ex[3]));\n"
+                + "  const logoBox=document.querySelector(\"#logo-input textarea,#logo-input input\");\n"
+                + "  if(logoBox) updateReactValue(logoBox,ex[4]);\n"
+                + "  setColorValue(\"logo-color-input\",convertToHexIfNeeded(ex[5]));\n"
+                + "  const styleSel=document.querySelector(\"#style-input select\");\n"
+                + "  if(styleSel) { styleSel.value=ex[6]; styleSel.dispatchEvent(new Event(\"change\",{bubbles:true})); }\n"
+                + "  const linkBox=document.querySelector(\"#link-input textarea,#link-input input\");\n"
+                + "  if(linkBox) updateReactValue(linkBox,ex[7]);\n"
+                + "}\n"
+                + "</script>"
+            )
 
             gr.HTML(html_items + apply_example_js)