Update app.py

app.py

@@ -43,21 +43,33 @@ with gr.Blocks(theme=gr.themes.Default()) as demo:
     <h1 style="text-align: center; font-size: 2.2em; margin-bottom: 0.2em;">🎨 BadgeCraft - Beautiful Badge Generator</h1>
     <p style="text-align: center; font-size: 1.1em; color: #555;">Design stylish shields.io badges with live preview and HTML snippet generation.</p>
 
-    <div align="center" style="font-weight: bold; margin-top: 20px; margin-bottom: 15px;">
-      <b>Papers Leaderboard: <a href="https://huggingface.co/spaces/Heartsync/Papers-Leaderboard">https://huggingface.co/spaces/Heartsync/Papers-Leaderboard</a></b>
-    </div>
-    <div align="center" style="line-height: 1.7;">
-      <a href="https://discord.gg/openfreeai" style="margin: 2px;">
-        <img alt="OpenFree AI Discord Server" src="https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white" />
+    <div align="center" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 20px 0; justify-items: center;">
+      <a href="https://discord.gg/openfreeai">
+        <img alt="Discord" src="https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white" />
       </a>
-      <a href="https://x.com/openfree_ai" style="margin: 2px;">
-        <img alt="X.ai" src="https://img.shields.io/badge/X.com-000000?style=for-the-badge&logo=X&logoColor=white" />
+      <a href="https://x.com/openfree_ai">
+        <img alt="X" src="https://img.shields.io/badge/X.com-000000?style=for-the-badge&logo=X&logoColor=white" />
       </a>
-      <a href="https://huggingface.co/collections/VIDraft/best-open-ai-services-68057e6e312880ea92abaf4c" style="margin: 2px;">
+      <a href="https://huggingface.co/collections/VIDraft/best-open-ai-services-68057e6e312880ea92abaf4c">
         <img alt="Collections" src="https://img.shields.io/badge/Collections-F8F8F8?style=for-the-badge&logo=huggingface&logoColor=black" />
       </a>
-      <a href="https://huggingface.co/VIDraft" style="margin: 2px;">
-        <img alt="HF Page" src="https://img.shields.io/badge/VIDraft-FCD022?style=for-the-badge&logo=huggingface&logoColor=black" />
+      <a href="https://huggingface.co/VIDraft">
+        <img alt="VIDraft" src="https://img.shields.io/badge/VIDraft-FCD022?style=for-the-badge&logo=huggingface&logoColor=black" />
+      </a>
+      <a href="https://github.com/openfreeai">
+        <img src="https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub">
+      </a>
+      <a href="https://twitter.com/openfree_ai">
+        <img src="https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter">
+      </a>
+      <a href="https://www.linkedin.com/company/openfreeai">
+        <img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn">
+      </a>
+      <a href="https://youtube.com/@openfreeai">
+        <img src="https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white" alt="YouTube">
+      </a>
+      <a href="https://huggingface.co/openfreeai">
+        <img src="https://img.shields.io/badge/HuggingFace-FCC72E?style=for-the-badge&logo=huggingface&logoColor=black" alt="HuggingFace">
       </a>
     </div>
     """)
@@ -83,28 +95,6 @@ with gr.Blocks(theme=gr.themes.Default()) as demo:
     for inp in inputs:
         inp.change(fn=generate_static_badge, inputs=inputs, outputs=[out_code, out_preview])
 
-    gr.HTML("""
-    <hr style="margin-top: 50px;">
-    <h3 style="text-align:center;">🌐 Example Badges for Popular Platforms</h3>
-    <div align="center" style="margin-top: 15px;">
-      <a href="https://github.com/openfreeai" style="margin: 4px;">
-        <img src="https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub">
-      </a>
-      <a href="https://twitter.com/openfree_ai" style="margin: 4px;">
-        <img src="https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter">
-      </a>
-      <a href="https://www.linkedin.com/company/openfreeai" style="margin: 4px;">
-        <img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn">
-      </a>
-      <a href="https://youtube.com/@openfreeai" style="margin: 4px;">
-        <img src="https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge&logo=youtube&logoColor=white" alt="YouTube">
-      </a>
-      <a href="https://huggingface.co/openfreeai" style="margin: 4px;">
-        <img src="https://img.shields.io/badge/HuggingFace-FCC72E?style=for-the-badge&logo=huggingface&logoColor=black" alt="HuggingFace">
-      </a>
-    </div>
-    """)
-
 # 실행
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()