Upload folder using huggingface_hub

README.md

@@ -1,12 +1,12 @@
+
 ---
-title: Custom Css Main
-emoji: 🏢
-colorFrom: red
+title: custom_css_main 
+emoji: 🔥
+colorFrom: indigo
 colorTo: indigo
 sdk: gradio
 sdk_version: 4.18.0
-app_file: app.py
+app_file: run.py
 pinned: false
+hf_oauth: true
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

requirements.txt

@@ -0,0 +1 @@
+https://gradio-builds.s3.amazonaws.com/dff410955e41145848376784c03fe28ba1c4fd85/gradio-4.18.0-py3-none-any.whl

run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: custom_css"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "css = \"\"\"\n", "/* CSSKeyframesRule for animation */\n", "@keyframes animation {\n", "    from {background-color: red;}\n", "    to {background-color: blue;}\n", "}\n", "\n", ".cool-col {\n", "    animation-name: animation;\n", "    animation-duration: 4s;\n", "    animation-iteration-count: infinite;\n", "    border-radius: 10px;\n", "    padding: 20px;\n", "}\n", "\n", "/* CSSStyleRule */\n", ".markdown {\n", "    background-color: lightblue;\n", "    padding: 20px;\n", "}\n", "\n", ".markdown p {\n", "    color: royalblue;\n", "}\n", "\n", "/* CSSMediaRule */\n", "@media screen and (max-width: 600px) {\n", "    .markdown {\n", "        background: blue;\n", "    }\n", "    .markdown p {\n", "        color: lightblue;\n", "    }\n", "}\n", "\n", ".dark .markdown {\n", "    background: pink;\n", "}\n", "\n", ".darktest h3 {\n", "    color: black;\n", "}\n", "\n", ".dark .darktest h3 {\n", "    color: yellow;\n", "}\n", "\n", "/* CSSFontFaceRule */\n", "@font-face {\n", "    font-family: \"test-font\";\n", "    src: url(\"https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf\") format(\"truetype\");\n", "}\n", "\n", ".cool-col {\n", "    font-family: \"test-font\";\n", "}\n", "\n", "/* CSSImportRule */\n", "@import url(\"https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap\");\n", "\n", ".markdown {\n", "  font-family: \"Protest Riot\", sans-serif;\n", "}\n", "\"\"\"\n", "\n", "with gr.Blocks(css=css) as demo:\n", "    with gr.Column(elem_classes=\"cool-col\"):\n", "        gr.Markdown(\"### Gradio Demo with Custom CSS\", elem_classes=\"darktest\")\n", "        gr.Markdown(elem_classes=\"markdown\", value=\"Resize the browser window to see the CSS media query in action.\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

run.py

@@ -0,0 +1,74 @@
+import gradio as gr
+
+css = """
+/* CSSKeyframesRule for animation */
+@keyframes animation {
+    from {background-color: red;}
+    to {background-color: blue;}
+}
+
+.cool-col {
+    animation-name: animation;
+    animation-duration: 4s;
+    animation-iteration-count: infinite;
+    border-radius: 10px;
+    padding: 20px;
+}
+
+/* CSSStyleRule */
+.markdown {
+    background-color: lightblue;
+    padding: 20px;
+}
+
+.markdown p {
+    color: royalblue;
+}
+
+/* CSSMediaRule */
+@media screen and (max-width: 600px) {
+    .markdown {
+        background: blue;
+    }
+    .markdown p {
+        color: lightblue;
+    }
+}
+
+.dark .markdown {
+    background: pink;
+}
+
+.darktest h3 {
+    color: black;
+}
+
+.dark .darktest h3 {
+    color: yellow;
+}
+
+/* CSSFontFaceRule */
+@font-face {
+    font-family: "test-font";
+    src: url("https://mdn.github.io/css-examples/web-fonts/VeraSeBd.ttf") format("truetype");
+}
+
+.cool-col {
+    font-family: "test-font";
+}
+
+/* CSSImportRule */
+@import url("https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap");
+
+.markdown {
+  font-family: "Protest Riot", sans-serif;
+}
+"""
+
+with gr.Blocks(css=css) as demo:
+    with gr.Column(elem_classes="cool-col"):
+        gr.Markdown("### Gradio Demo with Custom CSS", elem_classes="darktest")
+        gr.Markdown(elem_classes="markdown", value="Resize the browser window to see the CSS media query in action.")
+
+if __name__ == "__main__":
+    demo.launch()