More resemblance to annif.org

app.py

@@ -71,55 +71,32 @@ def process(image, project_num: int, lang: str = "eng"):
 langs = ("eng", "fin", "swe")
 
 css = """
-.gradio-container, .gradio-container * {
+.gradio-container, .gradio-container *, body, .mygrclass {
     color: #343260 !important;
     background-color: #f3f3f6;
     color: #343260;
     font-family: Jost, sans-serif;
     font-weight: 400;
-    font-size: 1.2rem;
-    line-height: 1.2;
-}
-body, .mygrclass {
-    background-color: #f3f3f6;
-    color: #343260;
-    font-family: Jost, sans-serif;
-    font-weight: 400;
-    font-size: 1.2rem;
-    line-height: 1.2;
-}
-.container {
-    max-width: 1140px;
-    margin: 0 auto;
-    padding: 0 15px;
+    font-size: 1rem;
+    line-height: 1;
 }
 h1, h1 a {
+    padding: 2rem 0;
     font-weight: 500;
     font-size: 2rem;
     text-align: center;
 }
 h2 {
     font-weight: 500;
-    font-size: 1.5rem;
+    font-size: 1.2rem;
     padding: 0.5rem 0;
 }
-#form {
-    background: linear-gradient(to bottom, #ffffff 0%, #d9dfe3 1%, #f3f3f6 1%, #f3f3f6 99%, #d9dfe3 99%, #ffffff 100%);
-    padding: 2rem 0;
-}
-.form-control {
-    border-radius: 0px;
-}
 #get-suggestions {
-    margin: 2rem 0;
-    background-color: #6280dc;
-    color: white;
+    margin: 2rem 0 0 0;
+    background: #6280dc;
+    color: white !important;
     border: none;
     border-radius: 0px;
-    padding-right: 3rem;
-    background-image: url('static/img/arrow-white.svg');
-    background-position: 97% center;
-    background-repeat: no-repeat;
 }
 #suggestions-wrapper {
     background-color: #f3f3f6;
@@ -134,15 +111,23 @@ h2 {
 .list-group-item {
     display: flex;
     align-items: center;
-    padding: 5px 0;
+    padding: 1px 0;
     border-bottom: 1px solid #e0e0e0;
 }
 meter {
     width: 24px;
     margin-right: 10px;
 }
+meter:-moz-meter-optimum::-moz-meter-bar {
+    background: #6280dc;
+}
 meter::-webkit-meter-bar {
+    border: none;
+    border-radius: 0;
+    height: 18px;
     background-color: #ccc;
+    box-shadow: 0 12px 3px -5px #e6e6e6 inset;
+    margin: 2 rem;
 }
 meter::-webkit-meter-optimum-value {
     background: #6280dc;
@@ -161,7 +146,7 @@ with gr.Blocks(theme=gr.themes.Default(radius_size="none"), css=css) as demo:
         with gr.Column(scale=1):
             project = gr.Dropdown(choices=proj_names, label="Project (vocabulary and language)", type="index", elem_classes="mygrclass", value=proj_names[2])
             lang = gr.Dropdown(choices=langs, label="Select Language for OCR", type="value", value="eng", elem_classes="mygrclass")
-            submit_btn = gr.Button("Get suggestions", elem_id="get-suggestions", elem_classes="mygrclass")
+            submit_btn = gr.Button("Get text & suggestions", elem_id="get-suggestions", elem_classes="mygrclass")
 
     with gr.Row():
         with gr.Column(scale=3):