Use html and css for plotting instead of plotly

app.py

@@ -51,61 +51,49 @@ def process(image, project_num: int, lang: str = "eng"):
 
         results = annif.suggest(project_id=proj_ids[project_num], text=text)
 
-        # Prepare data for plotting and sort in decreasing order of scores
+        # Sort results by score in descending order
         sorted_results = sorted(results, key=lambda x: x['score'], reverse=True)
-        labels = [res['label'] for res in sorted_results]
-        scores = [res['score'] for res in sorted_results]
-
-        # Create a horizontal bar plot
-        fig = go.Figure()
-
-        # Add bars
-        fig.add_trace(go.Bar(
-            y=labels,
-            x=scores,
-            orientation='h',
-            marker_color='lightblue',
-            width=0.6,  # Adjust bar width
-        ))
-
-        # Customize the layout
-        fig.update_layout(
-            title="SUGGESTED SUBJECTS",
-            title_font=dict(size=16, color='black', family='Arial, sans-serif'),
-            xaxis=dict(
-                range=[0, max(scores)],  # Set x-axis range
-                showticklabels=False,
-                showgrid=False,
-                zeroline=False,
-            ),
-            yaxis=dict(
-                title=None,
-                tickfont=dict(size=12, color='black', family='Arial, sans-serif'),
-                side='right',  # Move labels to the right side
-                showline=False,
-                showgrid=False,
-            ),
-            margin=dict(l=10, r=120, t=40, b=10),  # Increase right margin for labels
-            height=400,
-            width=500,  # Set a fixed width to make the plot narrower
-            plot_bgcolor='white',
-        )
-
-        # Remove the plotly logo and legend
-        fig.update_layout(showlegend=False)
-
-        # Add invisible scatter plots to push bars to the left
-        fig.add_trace(go.Scatter(
-            x=[0]*len(labels),
-            y=labels,
-            mode='markers',
-            marker=dict(color='rgba(0,0,0,0)'),
-            showlegend=False,
-        ))
-
-        return text, fig
+
+        # Generate HTML for results
+        html_content = """
+        <style>
+            .results-container {
+                font-family: Arial, sans-serif;
+                width: 300px;
+            }
+            .result-item {
+                display: flex;
+                align-items: center;
+                margin-bottom: 5px;
+            }
+            .bar {
+                background-color: #B4D5FE;
+                height: 20px;
+                margin-right: 10px;
+            }
+            .label {
+                flex-grow: 1;
+                font-size: 14px;
+            }
+        </style>
+        <div class="results-container">
+            <h3 style="margin-bottom: 15px;">SUGGESTED SUBJECTS</h3>
+        """
+
+        for result in sorted_results:
+            bar_width = result['score'] * 100  # Scale the score to percentage
+            html_content += f"""
+            <div class="result-item">
+                <div class="bar" style="width: {bar_width}%;"></div>
+                <div class="label">{result['label']}</div>
+            </div>
+            """
+
+        html_content += "</div>"
+
+        return text, html_content
     except Exception as e:
-        return str(e), None
+        return str(e), ""
 
 
 langs = ("eng", "fin", "swe")
@@ -120,7 +108,7 @@ interface = gr.Interface(
     ],
     outputs=[
         "text",
-        gr.Plot()
+        gr.HTML(),
     ],
     css="footer {visibility: hidden}",
     title="Annif demo using Optical Character Recognition",

requirements.txt

@@ -1,5 +1,4 @@
 pytesseract
 gradio
 opencv-python
-plotly
 annif-client