Add new logo, add examples

app.py

@@ -104,9 +104,11 @@ def greet(label, video0, video1):
 
 
 label = gr.outputs.Label(num_top_classes=3, label="Top class probabilities")
-demo = gr.Interface(fn=greet, inputs=[gr.Dropdown(["Webcam", "Video"], label="Please select the input type:", type="value"), gr.Video(source="webcam", label="Webcam recording", type="mp4"), gr.Video(source="upload", label="Video upload", type="mp4")], outputs=label,
-                    title="SPOTER Sign language recognition",
+demo = gr.Interface(fn=greet, inputs=[gr.Dropdown(["Webcam", "Video"], label="Input source", type="value"), gr.Video(source="webcam", label="Webcam recording", type="mp4"), gr.Video(source="upload", label="Video upload", type="mp4")], outputs=label,
+                    title="",
                     description="""
+<img src="https://www.signlanguagerecognition.com/spoter-logo.png" style="width: 120px; margin-left: -5px;">
+<h1 style="margin-top: -20px; color: #F7B832;">ASL Recognition Demo</h1>
 <details>
     <summary style="font-family: MonumentExpanded; font-size: 1em !important;" class="unselectable">
     Instructions
@@ -129,93 +131,13 @@ demo = gr.Interface(fn=greet, inputs=[gr.Dropdown(["Webcam", "Video"], label="Pl
 </details>     
                     """,
                     article="by [Matyáš Boháček](https://www.matyasbohacek.com)",
-                    css="""
-                            @font-face {
-                                font-family: Graphik;
-                                font-weight: regular;
-                                src: url("https://www.signlanguagerecognition.com/supplementary/GraphikRegular.otf") format("opentype");
-                            }
-
-                            @font-face {
-                                font-family: Graphik;
-                                font-weight: bold;
-                                src: url("https://www.signlanguagerecognition.com/supplementary/GraphikBold.otf") format("opentype");
-                            }
-
-                            @font-face {
-                                font-family: MonumentExpanded;
-                                font-weight: regular;
-                                src: url("https://www.signlanguagerecognition.com/supplementary/MonumentExtended-Regular.otf") format("opentype");
-                            }
-
-                            @font-face {
-                                font-family: MonumentExpanded;
-                                font-weight: bold;
-                                src: url("https://www.signlanguagerecognition.com/supplementary/MonumentExtended-Ultrabold.otf") format("opentype");
-                            }
-
-                            html {
-                                font-family: "Graphik";
-                            }   
-
-                            h1 {
-                                font-family: "MonumentExpanded";
-                            }
-
-                            #12 {
-        -                       background-image: linear-gradient(to left, #61D836, #6CB346) !important;
-                                background-color: #61D836 !important;
-                            }
-
-                            #12:hover {
-        -                       background-image: linear-gradient(to left, #61D836, #6CB346) !important;
-                                background-color: #6CB346 !important;
-                                border: 0 !important;
-                                border-color: 0 !important;
-                            }
-
-                            .dark .gr-button-primary {
-                                --tw-gradient-from: #61D836;
-                                --tw-gradient-to: #6CB346;
-                                border: 0 !important;
-                                border-color: 0 !important;
-                            }
-
-                            .dark .gr-button-primary:hover {
-                                --tw-gradient-from: #64A642;
-                                --tw-gradient-to: #58933B;
-                                border: 0 !important;
-                                border-color: 0 !important;
-                            }
-                            
-                            .gr-prose li {
-                                margin-top: 0 !important;
-                                margin-bottom: 0 !important;
-                            }
-                            
-                            .gr-prose ol ol, .gr-prose ol ul, .gr-prose ul ol, .gr-prose ul ul {
-                                margin-top: 0 !important;
-                                margin-bottom: 0 !important;
-                            }
-                            
-                            .gr-prose h1 {
-                                font-size: 1.75em !important;
-                                text-align: left !important;
-                            }
-                            
-                            .unselectable {
-                                -webkit-user-select: none;
-                                -moz-user-select: none;
-                                -ms-user-select: none;
-                                user-select: none;
-                            }
-                            
-                            footer {
-                                opacity: 0 !important;
-                                alpha: 0 !important;
-                            }
-                           """,
-                            cache_examples=True
+                    css="""styles.css""",
+                    cache_examples=True,
+                    examples=[
+                        ["Video", None, "examples/chair.mp4"],
+                        ["Video", None, "examples/computer.mp4"],
+                        ["Video", None, "examples/work.mp4"]
+                    ]
                     )
 
 demo.launch(debug=True)