Duplicate from Omnibus/Spaces-on-Twitter

Co-authored-by: Bot <[email protected]>

.gitattributes

@@ -0,0 +1,34 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

README.md

@@ -0,0 +1,13 @@
+---
+title: Interactive Spaces on Twitter
+emoji: ⚡
+colorFrom: blue
+colorTo: indigo
+sdk: gradio
+sdk_version: 3.19.1
+app_file: app.py
+pinned: true
+duplicated_from: Omnibus/Spaces-on-Twitter
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,193 @@
+import os
+import sys
+import cv2
+import uuid
+from PIL import Image
+import gradio as gr
+from pathlib import Path 
+from huggingface_hub import (create_repo,get_full_repo_name,upload_file,CommitOperationAdd,HfApi)
+
+token_self = os.environ['HF_TOKEN']
+
+ 
+def build_space(t_name,t_space,t_title,t_description,t_redirect,t_image=None,t_image_url=None,token=None):
+    uid = uuid.uuid4()
+    model_id=t_name
+    #model_id="omnibus/fff"
+    if token==None or token=="":
+        token = token_self
+    else:
+        token = token
+        pass
+    api = HfApi(token=token)
+    repo_name = get_full_repo_name(model_id=model_id, token=token)
+    
+    if t_redirect==None or t_redirect=="":
+        t_redirect=t_space
+    else:
+        t_redirect=t_redirect
+        pass
+    
+    try:
+        print(t_space.rsplit('.hf', 1)[-1])
+        if t_space.rsplit('.hf', 1)[-1] == ".space":        
+            repo_url = api.create_repo(
+                repo_id=model_id,
+                repo_type="space",
+                space_sdk="static",
+                private=False,
+            )
+            print(f"""Space Built at {repo_name}""")
+        else:
+            model_id=None
+            repo_name=None
+            t_space=None
+            t_image=None
+            t_image_url=None
+            api=None
+            pass
+            return gr.HTML.update(f"""Invalid Direct URL: must be a Huggingface Space<br>Be sure URL is in lowercase""")  
+    except Exception as e:
+        return gr.HTML.update(f"""{str(e)}""")
+    
+    if t_image_url != None and t_image_url != "" and t_image==None:
+        t_image=t_image_url
+        print(f"Using image URL {t_image}")
+        pass
+    elif t_image != None:
+        img1 = Image.open(t_image)
+        img1.thumbnail((500,500), Image.Resampling.LANCZOS)
+        img1.save(f'tmpim-{uid}.png')
+        output_pro=cv2.imread(f'tmpim-{uid}.png')
+
+        cv2.imwrite(f"./img-{uid}.png",output_pro)
+        try: 
+            api.upload_file(
+            path_or_fileobj=f"./img-{uid}.png",
+            path_in_repo="card_im.png",
+            repo_id=repo_name,
+            token=token,
+            repo_type="space",
+            )
+            t_image = f"https://{repo_name.replace('/','-').replace('_','-')}.hf.space/card_im.png"
+            os.remove(f"./img-{uid}.png")
+
+            print(f"Image Uploaded to: {t_image}")
+        except Exception as e:
+            return gr.HTML.update(f"""{str(e)}""")        
+        pass 
+    else: 
+        print("Default Image")
+        t_image="https://huggingface.co/spaces/portal/bin/resolve/main/ai_demo_card.png"
+        pass
+        
+    try:
+        api_url = f'https://huggingface.co/api/spaces/{model_id}'
+        t_iframe = t_space
+        t_link =  f"https://{repo_name.replace('/','-').replace('_','-')}.hf.space/ai.html"
+        t_space = f"https://{repo_name.replace('/','-').replace('_','-')}.hf.space/back.html"
+
+        with open("template/ai.html", "r") as f:
+            app = f.read()
+        app = app.replace("$space", t_space)
+        app = app.replace("$title", t_title)
+        app = app.replace("$description", t_description)
+        app = app.replace("$image", t_image)
+        app = app.replace("$redirect", t_redirect)
+
+        with open("ai.html", "w") as f:
+            f.write(app)
+
+        api.upload_file(
+            path_or_fileobj="ai.html",
+            path_in_repo="ai.html",
+            repo_id=repo_name,
+            token=token,
+            repo_type="space",
+        )
+        os.remove("ai.html")
+
+        with open("template/front.html", "r") as f:
+            app = f.read()
+        app = app.replace("$iframe", t_iframe)
+
+        with open("front.html", "w") as f:
+            f.write(app)
+
+        api.upload_file(
+            path_or_fileobj="front.html",
+            path_in_repo="index.html",
+            repo_id=repo_name,
+            token=token,
+            repo_type="space",
+        )
+        os.remove("front.html")
+
+        
+        with open("template/back.html", "r") as f:
+            app = f.read()
+        app = app.replace("$iframe", t_iframe)
+        # 3. save the new app.py file
+        with open("back.html", "w") as f:
+            f.write(app)
+
+        api.upload_file(
+            path_or_fileobj="back.html",
+            path_in_repo="back.html",
+            repo_id=repo_name,
+            token=token,
+            repo_type="space",
+        )
+        os.remove("back.html")
+        return gr.HTML.update(f'''<center>Your Interactive Twitter Card Embed Link is:<br><a href="{t_link}" target="_blank">{t_link}</a><center><br>''')
+    except Exception as e:
+        return gr.HTML.update(f"""{str(e)}""")
+def d_im():
+    output="https://huggingface.co/spaces/portal/bin/resolve/main/ai_demo_card.png"
+    return output
+
+with gr.Blocks() as build_app:
+    gr.Markdown("""<center><h1>Interactive Twitter Card Builder</h1></center>""")
+
+    with gr.Row():
+        gr.Column(scale=1)
+        with gr.Column(scale=3):
+            with gr.Accordion("Details",open=False):
+                with gr.Tab("Description"):
+                        gr.Markdown("""<h7>This space will build an Interactive Twitter Card<br>
+                        where Twitter (and other) users can run your Gradio demo<br>
+                        right on their Social Media feed.<br><br>
+                        *Only works through browser, not Twitter App<br><br>
+                        Enter the required information and paste the link that is returned<br>
+                        as the only link, along with your message and tags, in your Tweet.<br>
+                        When posted, the Interactive Twitter Card should have a Play button<br>
+                        which will display the Space you provided.<br><br>
+                        Twitter will remember this card associated with the link you post,<br>
+                        so any changes will often require a differently named link.<br><br>
+                        You can test your link first by omitting your Write token<br>
+                        which will assign the default REPO: "portal"<br>(Link: portal-NAME.hf.space)<br><br>
+                        This Space is a Demo, and is a Work in Progress<br>
+                        No Warranties, Guarantees, or Permissions implied
+                        """)
+                with gr.Tab("Credits"):
+                        gr.Markdown("""<h7><a href='https://huggingface.co/spaces/anzorq/sd-space-creator'>anzorq/sd-space-creator</a><br>""")
+                
+
+            with gr.Box():
+                option_token = gr.Textbox(label="HF Write Token to write to your REPO", placeholder="Optional")
+                t_name = gr.Textbox(label="NAME (Link will be: repo-NAME.hf.space)")                
+                t_space = gr.Textbox(label="Direct URL to your Space (https://you-repo-you-space.hf.space)")
+                t_title = gr.Textbox(label="Title for Twitter Card")
+                t_description = gr.Textbox(label="Short Description for Twitter Card")
+                t_redirect = gr.Textbox(label="Redirect URL for Twitter Card Click", placeholder="Optional Redirect URL")
+                gr.Markdown("""Image for your Card (min: 300x300 [Square]""")
+                t_image_url = gr.Textbox(label="Image URL", placeholder="Optional URL of Image")
+                t_image = gr.Image(label="Twitter Card Image", type="filepath",interactive=True)
+                with gr.Row():
+                    input_button = gr.Button()
+                    def_im = gr.Button("Load Default Image")
+                output_html = gr.HTML("""""")
+        gr.Column(scale=1)
+    input_button.click(build_space,[t_name,t_space,t_title,t_description,t_redirect,t_image,t_image_url,option_token],output_html)
+    def_im.click(d_im,None,t_image)
+build_app.queue(concurrency_count=10).launch()

requirements.txt

@@ -0,0 +1 @@
+opencv-python

sauce.css

@@ -0,0 +1,84 @@
+#component-1{
+  color:white;
+}
+#component-5{
+  background:linear-gradient(337deg, #1f2937, #324974);
+  color:white;
+}
+#component-6{
+  color:white;
+}
+#component-7{
+  background:#3d5a8f;
+  color:white;
+}
+#component-8{
+  background:linear-gradient(90deg, #00000038, #6495ed26);
+  color:white;
+}
+#component-9{
+  background:linear-gradient(90deg, #00000038, #6495ed26);
+  color:white;
+}
+#component-10{
+  background:linear-gradient(90deg, #00000038, #6495ed26);
+  color:white;
+}
+#component-11{
+  background:linear-gradient(90deg, #00000038, #6495ed26);
+  color:white;
+}
+#component-12{
+  background:linear-gradient(90deg, #00000038, #6495ed26);
+  color:white;
+}
+#component-13{
+  background:linear-gradient(90deg, #00000038, #6495ed26);
+  color:white;
+}
+#component-14{
+  color:white;
+}
+#component-15{
+  background:linear-gradient(90deg, #00000038, #6495ed26);
+  color:white;
+}
+#component-16{
+  background:#3a588f;
+  color:white;
+}
+#component-18{
+  background:radial-gradient(#6495ed26,#00000091);
+  color:white;
+}
+#component-19{
+  background:radial-gradient(#6495ed26,#00000091);
+  color:white;
+}
+.gradio-container-3-19-1 .prose *{
+  color:white;
+}
+.app.svelte-1cuuugq>.main.svelte-1cuuugq{
+  background:radial-gradient(circle farthest-side, #c5d6f5, #324975);
+}
+.gradio-container-3-19-1 .prose h1{
+  color:white;
+}
+.wrap.svelte-1hmcgg5{
+  color:white;
+}
+span.svelte-1l2rj76{
+  color:white;
+}
+div.svelte-1fwqiwq{
+  border:none;
+}
+div.svelte-1fwqiwq{
+  background:none;
+}
+.gradio-container-3-19-1 .prose>*:first-child{
+  color:white;
+}
+footer.svelte-t2gwjj.svelte-t2gwjj.svelte-t2gwjj{
+  color:white;
+}

template/ai.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="twitter:card" content="player"/>
+    <meta name="twitter:site" content=""/>
+    <meta name="twitter:player" content="$space"/>
+    <meta name="twitter:player:stream" content="$space"/>
+    <meta name="twitter:player:width" content="100%"/>
+    <meta name="twitter:player:height" content="100%"/>    
+    <meta property="og:title" content="$title"/>
+    <meta property="og:description" content="$description"/>
+    <meta property="og:image" content="$image"/>
+    <meta http-equiv="refresh" content="0; url=$redirect">
+  </head>
+  <body>
+  </body>
+</html>

template/back.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ 
+<style>
+  .container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding-top: 100%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
+}
+  .responsive-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+    </style>
+  </head>
+  <body>
+<div class="container">
+<iframe
+  class="responsive-iframe"
+	src="$iframe"
+	frameborder="0"
+></iframe>
+</div>
+
+  </body>
+</html>

template/front.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+  </head>
+  <body>
+    <iframe
+  	src="$iframe"
+  	frameborder="0"
+    width="100%"
+    height="2000"
+    ></iframe> 
+  </body>
+</html>