added web and model outputs definitions

src/web/__init__.py

@@ -0,0 +1,4 @@
+from .app import (
+    app,
+    server
+)

src/web/app.py

@@ -0,0 +1,33 @@
+from dash import Dash, html, Input, Output, State, page_container, page_registry
+import dash_bootstrap_components as dbc
+import dash_mantine_components as dmc
+
+from .header import generate_header
+from .body import generate_body
+from model_experiential import model_labels as experiential_labels
+from model_interpersonal import model_labels as interpersonal_labels
+from model_textual import model_labels as textual_labels
+
+
+app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
+server = app.server
+
+app.layout = dmc.MantineProvider(
+    theme={
+        'fontFamily': '"Inter", sans-serif',
+        "components": {
+            "NavLink":{'styles':{'label':{'color':'#c2c7d0'}}}
+            },
+        },
+    children=[
+        dmc.Container([
+            generate_header(),
+            generate_body(
+                experiential_labels,
+                interpersonal_labels,
+                textual_labels
+            ),
+        ]),
+    ],
+)
+        

src/web/body.py

@@ -0,0 +1,71 @@
+import dash_mantine_components as dmc
+from dash import dcc, html
+
+def generate_body(
+    experiential_labels,
+    interpersonal_labels,
+    textual_labels
+):
+    image_container = dmc.Image(
+        width=400,
+        height=400,
+        withPlaceholder=True,
+        placeholder=[dmc.Loader(color="gray", size="md")],
+    )
+
+    experiential_labels_container = dmc.Container(
+        children=[
+            html.H4("experiential labels".title()),
+            dcc.RadioItems(options=list(experiential_labels)),
+        ]
+    )
+
+    interpersonal_labels_container = dmc.Container(
+        children=[]
+    )
+    for category, options in interpersonal_labels.items():
+        interpersonal_labels_container.children.append(html.H4(category.title()))
+        interpersonal_labels_container.children.append(dcc.RadioItems(options))
+
+    textual_labels_container = dmc.Container(
+        children=[]
+    )
+    for category, options in textual_labels.items():
+        textual_labels_container.children.append(html.H4(category.title()))
+        textual_labels_container.children.append(dcc.RadioItems(options))
+
+    label_container = dmc.Container(
+        children=[
+            experiential_labels_container,
+            dmc.Divider(),
+            interpersonal_labels_container,
+            dmc.Divider(),
+            textual_labels_container,
+            dmc.Divider(),
+            html.Button(
+                "confirm",
+                id="submit-button"
+            )
+        ]
+    )
+
+    body_container = dmc.Container(
+        dmc.Grid(
+            children=[
+                dmc.Col(
+                    image_container,
+                    span=5,
+                ),
+                dmc.Col(
+                    dmc.Divider(orientation="vertical"),
+                    span=1,
+                ),
+                dmc.Col(
+                    # radio buttons part
+                    label_container,
+                    span=5,
+                ),
+            ], grow=True
+        )
+    )
+    return body_container

src/web/header.py

@@ -0,0 +1,15 @@
+import dash_mantine_components as dmc
+from dash import html
+
+def generate_header():
+    header = dmc.Header(
+        height=80,
+        children=[
+            dmc.Container(
+                children=[
+                    html.H2(children="Visual Critical Discourse Analysis Tool", style={"margin-left": "20px", "padding-top": "-5px"}),
+                ], size="xl", px="xl",
+            ),
+        ]
+    )
+    return header