Upload folder using huggingface_hub

README.md

@@ -5,7 +5,7 @@ emoji: 🔥
 colorFrom: indigo
 colorTo: indigo
 sdk: gradio
-sdk_version: 5.49.1
+sdk_version: 6.0.0
 app_file: run.py
 pinned: false
 hf_oauth: true

custom_css.css

@@ -0,0 +1,64 @@
+/* CSSKeyframesRule for animation */
+@keyframes animation {
+    from {background-color: red;}
+    to {background-color: blue;}
+}
+
+.cool-col {
+    background-color: red;
+    animation-name: animation;
+    animation-duration: 4s;
+    animation-delay: 2s;
+    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;
+}

requirements.txt

@@ -1,2 +1,2 @@
-gradio-client @ git+https://github.com/gradio-app/gradio@e05eb8df38a4ca20993e94ca4e209cf8110bb677#subdirectory=client/python
-https://gradio-pypi-previews.s3.amazonaws.com/e05eb8df38a4ca20993e94ca4e209cf8110bb677/gradio-5.49.1-py3-none-any.whl
+gradio-client @ git+https://github.com/gradio-app/gradio@d007e6cf617baba5c62e49ec2b7ce278aa863a79#subdirectory=client/python
+https://gradio-pypi-previews.s3.amazonaws.com/d007e6cf617baba5c62e49ec2b7ce278aa863a79/gradio-6.0.0-py3-none-any.whl

run.ipynb

@@ -1 +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", "    background-color: red;\n", "    animation-name: animation;\n", "    animation-duration: 4s;\n", "    animation-delay: 2s;\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(\n", "            elem_classes=\"markdown\",\n", "            value=\"Resize the browser window to see the CSS media query in action.\",\n", "        )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"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": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/custom_css/custom_css.css"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Column(elem_classes=\"cool-col\"):\n", "        gr.Markdown(\"### Gradio Demo with Custom CSS\", elem_classes=\"darktest\")\n", "        gr.Markdown(\n", "            elem_classes=\"markdown\",\n", "            value=\"Resize the browser window to see the CSS media query in action.\",\n", "        )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch(css_paths=[\"demo/custom_css/custom_css.css\"])\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

run.py

@@ -1,73 +1,6 @@
 import gradio as gr
 
-css = """
-/* CSSKeyframesRule for animation */
-@keyframes animation {
-    from {background-color: red;}
-    to {background-color: blue;}
-}
-
-.cool-col {
-    background-color: red;
-    animation-name: animation;
-    animation-duration: 4s;
-    animation-delay: 2s;
-    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.Blocks() as demo:
     with gr.Column(elem_classes="cool-col"):
         gr.Markdown("### Gradio Demo with Custom CSS", elem_classes="darktest")
         gr.Markdown(
@@ -76,4 +9,4 @@ with gr.Blocks(css=css) as demo:
         )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(css_paths=["demo/custom_css/custom_css.css"])