[BIG PR] Gradio blocks & redesigned components

.circleci/config.yml

@@ -1,6 +1,6 @@
 version: 2.1
 orbs:
-  codecov: codecov/codecov@3.1.1
+  codecov: codecov/codecov@3.2.2
   node: circleci/node@4.7.0
 jobs:
   build:
@@ -11,6 +11,11 @@ jobs:
       - run: mkdir test-reports
       - restore_cache:
           key: deps1-{{ .Branch }}-{{ checksum "gradio.egg-info/requires.txt" }}
+      - run:
+          name: Install ffmpeg
+          command: |
+            sudo apt update
+            sudo apt install ffmpeg -y
       - run:
           name: Install Python deps in a venv
           command: |
@@ -38,11 +43,6 @@ jobs:
       - run:
           command: |
             mkdir screenshots
-      - run:
-          command: |
-            . venv/bin/activate
-            coverage run -m pytest
-            coverage xml
       - run:
           command: |
             . venv/bin/activate
@@ -55,6 +55,11 @@ jobs:
           command: |
             . venv/bin/activate
             python -m  flake8 --ignore=E731,E501,E722,W503,E126,F401,E203 gradio test
+      - run:
+          command: |
+            . venv/bin/activate
+            coverage run -m pytest
+            coverage xml
       - codecov/upload:
           file: 'coverage.xml'
       - store_artifacts:

.github/workflows/ui.yml

@@ -2,8 +2,8 @@ name: gradio-ui
 
 on:
   push:
-    branches: 
-      - "master"
+    branches:
+      - "main"
     paths:
       - "ui/**"
   pull_request:
@@ -12,23 +12,31 @@ on:
 
 defaults:
   run:
-    working-directory: ./ui
+    working-directory: ui
+
+env:
+  CI: true
+  PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: "1"
+  NODE_OPTIONS: "--max-old-space-size=4096"
 
 concurrency:
   group: deploy-${{ github.ref }}-${{ github.event_name == 'push' || github.event.inputs.fire != null }}
   cancel-in-progress: true
 
 jobs:
-  check:
+  quick-checks:
     name: static checks
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - run: npm i -g pnpm@6
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2.2.1
+        with:
+          version: 6
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
-
+          cache: pnpm
+          cache-dependency-path: ui/pnpm-lock.yaml
       - name: install dependencies
         run: pnpm i --frozen-lockfile
       - name: formatting check
@@ -38,5 +46,32 @@ jobs:
         continue-on-error: true
       - name: unit tests
         run: pnpm test:run
-      - name: build
-        run: pnpm build
+  functional-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: pnpm/action-setup@v2.2.1
+        with:
+          version: 6
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: pnpm
+          cache-dependency-path: ui/pnpm-lock.yaml
+      - name: Cache browsers
+        id: browser_cache
+        uses: actions/cache@main
+        with:
+          path: "~/.cache/ms-playwright"
+          key: chromium-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
+      - run: pnpm install --frozen-lockfile
+      - run: pnpx playwright install chromium
+      - run: pnpm build
+      - run: pnpm test:browser
+      - name: Upload failed tests screenshots
+        if: failure()
+        uses: actions/upload-artifact@v3
+        with:
+          retention-days: 3
+          name: test-failure-${{ github.run_id }}
+          path: ui/packages/app/test-results

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "python.formatting.provider": "black"
+}

codecov.yml

@@ -8,7 +8,7 @@ coverage:
       source:
         paths:
           - "gradio/"
-        target: 80%
+        target: 70%
         threshold: 0.1
     patch: off
 

demo/blocks_flashcards/run.py

@@ -0,0 +1,91 @@
+import random
+
+import gradio as gr
+
+demo = gr.Blocks()
+
+with demo:
+    gr.Markdown(
+        "Load the flashcards in the table below, then use the Practice tab to practice."
+    )
+
+    with gr.Tabs():
+        with gr.TabItem("Word Bank"):
+            flashcards_table = gr.Dataframe(headers=["front", "back"], type="array")
+        with gr.TabItem("Practice"):
+            with gr.Row():
+                front = gr.Textbox()
+                answer_row = gr.Row(visible=False)
+                with answer_row:
+                    back = gr.Textbox()
+            with gr.Row():
+                new_btn = gr.Button("New Card")
+                flip_btn = gr.Button("Flip Card")
+                selected_card = gr.Variable()
+                feedback_row = gr.Row(visible=False)
+                with feedback_row:
+                    correct_btn = gr.Button(
+                        "Correct",
+                        css={"background-color": "lightgreen", "color": "green"},
+                    )
+                    incorrect_btn = gr.Button(
+                        "Incorrect", css={"background-color": "pink", "color": "red"}
+                    )
+        with gr.TabItem("Results"):
+            results = gr.Variable(default_value={})
+            correct_field = gr.Markdown("# Correct: 0")
+            incorrect_field = gr.Markdown("# Incorrect: 0")
+            gr.Markdown("Card Statistics: ")
+            results_table = gr.Dataframe(headers=["Card", "Correct", "Incorrect"])
+
+        def load_new_card(flashcards):
+            card = random.choice(flashcards)
+            return card, card[0], False, False
+
+        new_btn.click(
+            load_new_card,
+            [flashcards_table],
+            [selected_card, front, answer_row, feedback_row],
+        )
+
+        def flip_card(card):
+            return card[1], True, True
+
+        flip_btn.click(flip_card, [selected_card], [back, answer_row, feedback_row])
+
+        def mark_correct(card, results):
+            if card[0] not in results:
+                results[card[0]] = [0, 0]
+            results[card[0]][0] += 1
+            correct_count = sum(result[0] for result in results.values())
+            return (
+                results,
+                f"# Correct: {correct_count}",
+                [[front, scores[0], scores[1]] for front, scores in results.items()],
+            )
+
+        def mark_incorrect(card, results):
+            if card[0] not in results:
+                results[card[0]] = [0, 0]
+            results[card[0]][1] += 1
+            incorrect_count = sum(result[1] for result in results.values())
+            return (
+                results,
+                f"# Inorrect: {incorrect_count}",
+                [[front, scores[0], scores[1]] for front, scores in results.items()],
+            )
+
+        correct_btn.click(
+            mark_correct,
+            [selected_card, results],
+            [results, correct_field, results_table],
+        )
+
+        incorrect_btn.click(
+            mark_incorrect,
+            [selected_card, results],
+            [results, incorrect_field, results_table],
+        )
+
+if __name__ == "__main__":
+    demo.launch()

demo/blocks_inputs/run.py

@@ -0,0 +1,19 @@
+import gradio as gr
+
+str = """Hello friends
+hello friends
+
+Hello friends
+
+"""
+
+
+with gr.Blocks() as demo:
+    txt = gr.Textbox(label="Input", lines=5)
+    txt_2 = gr.Textbox(label="Output")
+    txt_3 = gr.Textbox(str, label="Output")
+    btn = gr.Button("Submit")
+    btn.click(lambda a: a, inputs=[txt], outputs=[txt_2])
+
+if __name__ == "__main__":
+    demo.launch()

demo/blocks_kinematics/run.py

@@ -0,0 +1,38 @@
+import matplotlib.pyplot as plt
+import numpy as np
+
+import gradio as gr
+
+
+def plot(v, a):
+    g = 9.81
+    theta = a / 180 * 3.14
+    tmax = ((2 * v) * np.sin(theta)) / g
+    timemat = tmax * np.linspace(0, 1, 40)[:, None]
+
+    x = (v * timemat) * np.cos(theta)
+    y = ((v * timemat) * np.sin(theta)) - ((0.5 * g) * (timemat**2))
+
+    fig = plt.figure()
+    plt.scatter(x=x, y=y, marker=".")
+    plt.xlim(0, 100)
+    plt.ylim(0, 60)
+    return fig
+
+
+demo = gr.Blocks()
+
+with demo:
+    gr.Markdown(
+        "Let's do some kinematics! Choose the speed and angle to see the trajectory."
+    )
+
+    with gr.Row():
+        speed = gr.Slider(25, min=1, max=30, label="Speed")
+        angle = gr.Slider(45, min=0, max=90, label="Angle")
+    output = gr.Image(type="plot")
+    btn = gr.Button("Run")
+    btn.click(plot, [speed, angle], output)
+
+if __name__ == "__main__":
+    demo.launch()