freddyaboulton HF Staff commited on
Commit
ab9101e
·
verified ·
1 Parent(s): e4a6e8c

Upload folder using huggingface_hub

Browse files
Files changed (3) hide show
  1. requirements.txt +2 -2
  2. run.ipynb +1 -1
  3. run.py +6 -1
requirements.txt CHANGED
@@ -1,2 +1,2 @@
1
- gradio-client @ git+https://github.com/gradio-app/gradio@cfd60b02797af3fa8679f7943ebf75ec5de7add4#subdirectory=client/python
2
- https://gradio-pypi-previews.s3.amazonaws.com/cfd60b02797af3fa8679f7943ebf75ec5de7add4/gradio-5.1.0-py3-none-any.whl
 
1
+ gradio-client @ git+https://github.com/gradio-app/gradio@61cd768490a12f5d63101d5434092bcd1cfc43a8#subdirectory=client/python
2
+ https://gradio-pypi-previews.s3.amazonaws.com/61cd768490a12f5d63101d5434092bcd1cfc43a8/gradio-5.1.0-py3-none-any.whl
run.ipynb CHANGED
@@ -1 +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", " 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}
 
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}
run.py CHANGED
@@ -8,8 +8,10 @@ css = """
8
  }
9
 
10
  .cool-col {
 
11
  animation-name: animation;
12
  animation-duration: 4s;
 
13
  animation-iteration-count: infinite;
14
  border-radius: 10px;
15
  padding: 20px;
@@ -68,7 +70,10 @@ css = """
68
  with gr.Blocks(css=css) as demo:
69
  with gr.Column(elem_classes="cool-col"):
70
  gr.Markdown("### Gradio Demo with Custom CSS", elem_classes="darktest")
71
- gr.Markdown(elem_classes="markdown", value="Resize the browser window to see the CSS media query in action.")
 
 
 
72
 
73
  if __name__ == "__main__":
74
  demo.launch()
 
8
  }
9
 
10
  .cool-col {
11
+ background-color: red;
12
  animation-name: animation;
13
  animation-duration: 4s;
14
+ animation-delay: 2s;
15
  animation-iteration-count: infinite;
16
  border-radius: 10px;
17
  padding: 20px;
 
70
  with gr.Blocks(css=css) as demo:
71
  with gr.Column(elem_classes="cool-col"):
72
  gr.Markdown("### Gradio Demo with Custom CSS", elem_classes="darktest")
73
+ gr.Markdown(
74
+ elem_classes="markdown",
75
+ value="Resize the browser window to see the CSS media query in action.",
76
+ )
77
 
78
  if __name__ == "__main__":
79
  demo.launch()