auto meta images, removed date and author

guides/creating_a_chatbot_with_gradio.md

@@ -1,10 +1,7 @@
-# 💬 How to Create a Chatbot with Gradio
+# How to Create a Chatbot with Gradio
 
-By [Abubakar Abid](https://huggingface.co/abidlabs) <br>
-Published: 20 January 2022 <br>
-gradio_version: 2.7.5
 related_spaces: https://huggingface.co/spaces/abidlabs/chatbot-minimal, https://huggingface.co/spaces/ThomasSimonini/Chat-with-Gandalf-GPT-J6B, https://huggingface.co/spaces/gorkemgoknar/moviechatbot, https://huggingface.co/spaces/Kirili4ik/chat-with-Kirill
-
+tags: NLP, TEXT, HTML
 ## Introduction
 
 Chatbots are widely studied in natural language processing (NLP) research and are a common use case of NLP in industry. Because chatbots are designed to be used directly by customers and end users, it is important to validate that chatbots are behaving as expected when confronted with a wide variety of input prompts. Using `gradio`, you can easily build a demo of your chatbot model and share that with a testing team, or test it yourself using an intuitive chatbot GUI.

guides/designing_your_interfaces.md

@@ -1,4 +1,6 @@
-## Designing Your Interfaces
+# Designing your Interfaces
 
-By [Ali Abdalla](https://huggingface.co/aliabd) <br>
-Published: 06 January 2022 <br>
+related_spaces: https://huggingface.co/spaces/abidlabs/chatbot-minimal, https://huggingface.co/spaces/ThomasSimonini/Chat-with-Gandalf-GPT-J6B, https://huggingface.co/spaces/gorkemgoknar/moviechatbot, https://huggingface.co/spaces/Kirili4ik/chat-with-Kirill
+tags: CSS, THEMES, ARTICLE, HTML
+
+## Introduction

website/homepage/render_html.py

@@ -12,6 +12,8 @@ from gradio.inputs import InputComponent
 from gradio.interface import Interface
 from gradio.outputs import OutputComponent
 
+import cairo
+
 GRADIO_DIR = "../../"
 GRADIO_GUIDES_DIR = os.path.join(GRADIO_DIR, "guides")
 GRADIO_DEMO_DIR = os.path.join(GRADIO_DIR, "demo")
@@ -25,23 +27,13 @@ for guide in sorted(os.listdir(GRADIO_GUIDES_DIR)):
     pretty_guide_name = " ".join(
         [word.capitalize().replace("Ml", "ML") for word in guide_name.split("_")]
     )
-    with open(os.path.join(GRADIO_GUIDES_DIR, guide),"r") as f:
+    with open(os.path.join(GRADIO_GUIDES_DIR, guide), "r") as f:
         guide_content = f.read()
 
-    guide_author, guide_date = "", ""
-    if "By [" in guide_content:
-        guide_author = guide_content.split("By [")[1].split("]")[0]
-    elif "By " in guide_content:
-        guide_author = guide_content.split("By ")[1].split("<br>")[0]
-    if "Published: " in guide_content:
-        guide_date = guide_content.split("Published: ")[1].split("<br>")[0]
-
     guide_dict = {
         "guide_name": guide_name,
         "pretty_guide_name": pretty_guide_name,
         "guide_content": guide_content,
-        "guide_author": guide_author,
-        "guide_date": guide_date
     }
     guides.append(guide_dict)
 
@@ -68,7 +60,71 @@ def render_guides_main():
         output_html = template.render(guides=guides)
     with open(os.path.join("generated", "guides.html"), "w", encoding='utf-8') as generated_template:
         generated_template.write(output_html)
-        
+
+
+def add_line_breaks(text, num_char):
+    if len(text) > num_char:
+        text_list = text.split()
+        text = ""
+        total_count = 0
+        count = 0
+        for word in text_list:
+            if total_count > num_char*5:
+                text = text[:-1]
+                text += "..."
+                break
+            count += len(word)
+            if count > num_char:
+                text += word + "\n"
+                total_count += count
+                count = 0
+            else:
+                text += word + " "
+                total_count += len(word+" ")
+        return text
+    return text
+
+
+def generate_guide_meta_tags(title, tags, url, guide_path_name):
+    surface = cairo.ImageSurface.create_from_png("src/assets/img/guides/base-image.png")
+    ctx = cairo.Context(surface)
+    ctx.scale(500, 500)
+    ctx.set_source_rgba(0.611764706,0.639215686,0.6862745098,1)
+    ctx.select_font_face("Arial", cairo.FONT_SLANT_NORMAL,
+      cairo.FONT_WEIGHT_NORMAL)
+    ctx.set_font_size(0.15)
+    ctx.move_to(0.3, 0.55)
+    ctx.show_text("gradio.app/guides")
+    if len(tags) > 5:
+        tags = tags[:5]
+    tags = "  |  ".join(tags)
+    ctx.move_to(0.3, 2.2)
+    ctx.show_text(tags)
+    ctx.set_source_rgba(0.352941176,0.352941176,0.352941176,1)
+    ctx.set_font_size(0.28)
+    title_breaked = add_line_breaks(title, 10)
+
+    if "\n" in title_breaked:
+        for i, t in enumerate(title_breaked.split("\n")):
+            ctx.move_to(0.3, 0.9+i*0.4)
+            ctx.show_text(t)
+    else:
+        ctx.move_to(0.3, 1.0)
+        ctx.show_text(title_breaked)
+    image_path = f"src/assets/img/guides/{guide_path_name}.png"
+    surface.write_to_png(image_path)
+    load_path = f"/assets/img/guides/{guide_path_name}.png"
+    meta_tags = f"""
+    <title>{title}</title>
+    <meta property="og:title" content="{title}" />
+    <meta property="og:type" content="article" />
+    <meta property="og:url" content="{url}" />
+    <meta property="og:image" content="{load_path}" />
+    <meta name="twitter:title" content="{title}">
+    <meta name="twitter:image" content="{load_path}">
+    <meta name="twitter:card" content="summary_large_image">
+    """
+    return meta_tags
 
 
 def render_guides():
@@ -79,21 +135,25 @@ def render_guides():
             os.path.join(GRADIO_GUIDES_DIR, guide), encoding="utf-8"
         ) as guide_file:
             guide_text = guide_file.read()
-        if "gradio_version: " in guide_text:
-            version = guide_text.split("gradio_version: ")[1].split("\n")[0]
-            guide_text = guide_text.replace(f"gradio_version: {version}",
-                               f"![](https://img.shields.io/static/v1.svg?label=gradio&message={version}"
-                               f"&color=green&labelColor=orange)")
-
 
         if "related_spaces: " in guide_text:
             spaces = guide_text.split("related_spaces: ")[1].split("\n")[0].split(", ")
-            spaces_html = "<div id='spaces-holder'><a href='https://hf.co/spaces' target='_blank'><img src='/assets/img/spaces-logo.svg'></a>"
+            spaces_html = "<div id='spaces-holder'><a href='https://hf.co/spaces' target='_blank'><img src='/assets/img/spaces-logo.svg'></a><p style='margin: 0;display: inline;font-size: large;font-weight: 400;'>Related Spaces: </p>"
             for space in spaces:
-                spaces_html += f"<div class='space-link' ><a href='{space}' target='_blank'>{space[30:]}</a></div>"
+                spaces_html += f"<div class='space-link'><a href='{space}' target='_blank'>{space[30:]}</a></div>"
             spaces_html += "</div>"
             guide_text = guide_text.split("related_spaces: ")[0] + spaces_html + "\n".join(guide_text.split("related_spaces: ")[1].split("\n")[1:])
 
+        tags = ""
+        if "tags: " in guide_text:
+            tags = guide_text.split("tags: ")[1].split("\n")[0].split(", ")
+            guide_text = guide_text.split("tags: ")[0] + "\n" + "\n".join(guide_text.split("tags: ")[1].split("\n")[1:])
+
+        title = " ".join(
+            [word.capitalize().replace("Ml", "ML").replace("Gan", "GAN") for word in guide[:-3].split("_")]
+        )
+        url = f"https://gradio.app/{guide[:-3]}/"
+        meta_tags = generate_guide_meta_tags(title, tags, url, guide[:-3])
 
         code_tags = re.findall(r'\{\{ code\["([^\s]*)"\] \}\}', guide_text)
         demo_names = re.findall(r'\{\{ demos\["([^\s]*)"\] \}\}', guide_text)
@@ -143,7 +203,7 @@ def render_guides():
         ) as general_template_file:
             general_template = Template(general_template_file.read())
         with open(os.path.join("generated", guide, "index.html"), "w", encoding='utf-8') as generated_template:
-            output_html = general_template.render(template_html=output_html, demo_names=demo_names)
+            output_html = general_template.render(template_html=output_html, demo_names=demo_names, meta_tags=meta_tags)
             generated_template.write(output_html)
 
 

website/homepage/requirements.txt

@@ -1,4 +1,5 @@
 markdown2
 jinja2
 requests
-pydrive
+pydrive
+pycairo

website/homepage/src/assets/img/just-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="482.122" height="170.306" viewBox="0 0 127.561 45.06"><path style="fill:#f1bc8a;fill-opacity:1;stroke-width:.0943025" transform="matrix(-.8768 -.48087 0 1 -16.026 -117.419)" d="M-65.857 110.343h20.722v5.806h-20.722zM-65.857 100.267h20.722v5.806h-20.722z"/><path style="fill:#eba059;fill-opacity:1;stroke-width:.0942989" transform="matrix(.87677 -.4809 0 1 -16.026 -117.419)" d="M45.06 163.607h20.798v5.843H45.06z"/><path style="fill:#f1bc8a;fill-opacity:1;stroke-width:.0943025" transform="matrix(-.8768 -.48087 0 1 -16.026 -117.419)" d="M-45.06 120.27h20.8v5.843h-20.8z"/><path style="fill:#eba059;fill-opacity:1;stroke-width:.0944389" transform="matrix(.87755 -.47948 0 1 -16.026 -117.419)" d="M24.237 143.556h20.86v5.843h-20.86z"/><path style="fill:#eba059;fill-opacity:1;stroke-width:.0942989" transform="matrix(.87677 -.4809 0 1 -16.026 -117.419)" d="M45.06 173.683h20.798v5.843H45.06z"/><path style="fill:#f1bc8a;fill-opacity:1;stroke-width:.0943025" transform="matrix(-.8768 -.48087 0 1 -16.026 -117.419)" d="M-45.06 130.346h20.8v5.843h-20.8z"/><path style="fill:#eba059;fill-opacity:1;stroke-width:.0944389" transform="matrix(.87755 -.47948 0 1 -16.026 -117.419)" d="M24.237 153.633h20.86v5.843h-20.86z"/></svg>

website/homepage/src/guides_main_template.html

@@ -6,18 +6,19 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <title>Gradio</title>
-  <meta name="description" content="Start building machine learning web apps in 5 lines of pure Python!">
-  <meta name="author" content="Getting Started with Gradio">
-  <meta property="og:title" content="Gradio">
+  <title>Gradio Guides</title>
+  <meta name="description" content="How to use Gradio">
+  <meta name="author" content="How to use Gradio">
+  <meta property="og:title" content="Gradio Guides">
   <meta property="og:type" content="website">
-  <meta property="og:url" content="https://gradio.app/">
-  <meta property="og:description" content="Start building machine learning web apps in 5 lines of pure Python!">
+  <meta property="og:url" content="https://gradio.app/guides">
+  <meta property="og:description" content="How to use Gradio">
+  <meta property="og:image" content="/assets/img/guides/guides-meta.png">
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:creator" content="@teamGradio">
-  <meta name="twitter:title" content="Getting Started with Gradio">
-  <meta name="twitter:description" content="Start building machine learning web apps in 5 lines of pure Python!">
-  <meta name="twitter:image" content="https://gradio.app/static/home/img/social-cheetah.jpg">  
+  <meta name="twitter:title" content="Gradio Guides">
+  <meta name="twitter:description" content="How to use Gradio">
+  <meta name="twitter:image" content="/assets/img/guides/guides-meta.png">
 
   <link rel="icon" type="image/png" href="/assets/img/logo.png">
   <link href="/gradio_static/static/bundle.css" rel="stylesheet">
@@ -176,10 +177,6 @@
       height: min-content;">
           <h2 class="font-semibold group-hover:underline text-xl" style="color: #5a5a5a;">{{ guide.pretty_guide_name }}
           </h2>
-          <p class="font-mono text-xs text-gray-500 flex items-center mt-3">By&nbsp;<object title="">{{ guide.guide_author }}</object>
-				<span class="w-1 h-1 flex-none mx-2 bg-gray-200"></span>
-			<span>{{ guide.guide_date }}</span>
-			</p>
         </div>
       </a>
       {% endfor %}

website/homepage/src/guides_template.html

@@ -5,20 +5,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <title>Gradio</title>
-  <meta name="description" content="Start building machine learning web apps in 5 lines of pure Python!">
-  <meta name="author" content="Getting Started with Gradio">
-  <meta property="og:title" content="Gradio">
-  <meta property="og:type" content="website">
-  <meta property="og:url" content="https://gradio.app/">
-  <meta property="og:description" content="Start building machine learning web apps in 5 lines of pure Python!">
-  <meta name="twitter:card" content="summary_large_image">
-  <meta name="twitter:creator" content="@teamGradio">
-  <meta name="twitter:title" content="Getting Started with Gradio">
-  <meta name="twitter:description" content="Start building machine learning web apps in 5 lines of pure Python!">
-  <meta name="twitter:image" content="https://gradio.app/static/home/img/social-cheetah.jpg">  
-
+  {{ meta_tags|safe }}
   <link rel="icon" type="image/png" href="/assets/img/logo.png">
   <link href="/gradio_static/static/bundle.css" rel="stylesheet">
   <link rel="stylesheet" href="/style.css">
@@ -81,8 +68,9 @@
 
     #spaces-holder img {
       display: inherit;
-      width: 3%;
+      width: 2.5%;
       margin: 0;
+      padding-bottom: 6px;
     }
 
   </style>