Spaces:

OzzyGT
/

ideogram4-caption

Running on Zero

App Files Files Community

OzzyGT HF Staff commited on 16 days ago

Commit

fa662af

1 Parent(s): b000493

fix retry

Browse files

Files changed (1) hide show

app.py +17 -7

app.py CHANGED Viewed

@@ -529,9 +529,9 @@ CSS = """
 /* ---- Scrollless, full-viewport layout: the page never scrolls; only the fields column does. ---- */
 html, body { height: 100%; margin: 0; overflow: hidden; }
-gradio-app { height: 100vh; overflow: hidden; }
 .gradio-container {
-    height: 100vh !important;
     max-width: 100% !important;
     padding: 6px 14px 4px !important;
     overflow: hidden !important;
@@ -544,7 +544,7 @@ gradio-app { height: 100vh; overflow: hidden; }
 }
 /* The right-hand editor column is the only thing that scrolls (like the desktop app). */
 #fields-col {
-    max-height: calc(100vh - 118px);
     overflow-y: auto;
     overflow-x: hidden;
     padding-right: 6px;
@@ -565,7 +565,7 @@ gradio-app { height: 100vh; overflow: hidden; }
 /* ---- Hand-rolled bbox canvas ---- */
 #bbox-root {
     width: 100%;
-    height: calc(100vh - 120px);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -574,7 +574,7 @@ gradio-app { height: 100vh; overflow: hidden; }
 }
 .ib-hint { color: var(--ib-subdued); font-size: 0.9rem; padding: 12px; }
 .ib-stage { position: relative; display: inline-block; max-width: 100%; max-height: 100%; line-height: 0; }
-.ib-img { display: block; max-width: 100%; max-height: calc(100vh - 120px); width: auto; height: auto; user-select: none; }
 .ib-box {
     position: absolute;
     border: 2px solid #4da460;
@@ -1505,9 +1505,19 @@ CANVAS_JS = r"""
 # Inject CSS + the canvas script straight into <head> as literal tags. This bypasses Gradio 6's
 # config-js path (which needs `new Function` and may be blocked/uninvoked), so the browser just runs
 # the <script> on load. CANVAS_JS is an arrow fn; `(...)()` self-invokes it.
 HEAD = (
     "<style>\n" + CSS + "\n</style>\n"
-    "<script>\nconsole.log('[IB] head script running');\n(" + CANVAS_JS + ")();\n</script>\n"
 )
 intro = (
@@ -1536,7 +1546,7 @@ with gr.Blocks(title="Ideogram4 Caption (Gemma4)") as demo:
                     image = gr.Image(
                         label="Source image",
                         type="pil",
-                        height="calc(100vh - 190px)",
                     )
                 with gr.Column(scale=1):
                     run = gr.Button(

 /* ---- Scrollless, full-viewport layout: the page never scrolls; only the fields column does. ---- */
 html, body { height: 100%; margin: 0; overflow: hidden; }
+gradio-app { height: var(--app-h, 100vh); overflow: hidden; }
 .gradio-container {
+    height: var(--app-h, 100vh) !important;
     max-width: 100% !important;
     padding: 6px 14px 4px !important;
     overflow: hidden !important;
 }
 /* The right-hand editor column is the only thing that scrolls (like the desktop app). */
 #fields-col {
+    max-height: calc(var(--app-h, 100vh) - 118px);
     overflow-y: auto;
     overflow-x: hidden;
     padding-right: 6px;
 /* ---- Hand-rolled bbox canvas ---- */
 #bbox-root {
     width: 100%;
+    height: calc(var(--app-h, 100vh) - 120px);
     display: flex;
     align-items: center;
     justify-content: center;
 }
 .ib-hint { color: var(--ib-subdued); font-size: 0.9rem; padding: 12px; }
 .ib-stage { position: relative; display: inline-block; max-width: 100%; max-height: 100%; line-height: 0; }
+.ib-img { display: block; max-width: 100%; max-height: calc(var(--app-h, 100vh) - 120px); width: auto; height: auto; user-select: none; }
 .ib-box {
     position: absolute;
     border: 2px solid #4da460;
 # Inject CSS + the canvas script straight into <head> as literal tags. This bypasses Gradio 6's
 # config-js path (which needs `new Function` and may be blocked/uninvoked), so the browser just runs
 # the <script> on load. CANVAS_JS is an arrow fn; `(...)()` self-invokes it.
+# --app-h is a *fixed pixel* stand-in for 100vh. On HF Spaces the app runs in a <gradio-app>
+# iframe that resizes to its content, so `vh` units feed back and grow forever. Pinning a pixel
+# height from window.innerHeight (updated only on real resize) breaks that loop.
+HEIGHT_SYNC_JS = (
+    "(function(){function s(){document.documentElement.style.setProperty("
+    "'--app-h', window.innerHeight + 'px');}s();"
+    "window.addEventListener('resize', s);"
+    "window.addEventListener('load', s);})();"
+)
 HEAD = (
     "<style>\n" + CSS + "\n</style>\n"
+    "<script>\nconsole.log('[IB] head script running');\n"
+    + HEIGHT_SYNC_JS + "\n(" + CANVAS_JS + ")();\n</script>\n"
 )
 intro = (
                     image = gr.Image(
                         label="Source image",
                         type="pil",
+                        height="calc(var(--app-h, 100vh) - 190px)",
                     )
                 with gr.Column(scale=1):
                     run = gr.Button(