Updating explanations

Dockerfile

@@ -6,8 +6,17 @@ ENV PATH="/home/user/.local/bin:$PATH"
 
 WORKDIR /app
 
+# Install python packages
 COPY --chown=user ./requirements.txt requirements.txt
 RUN pip install --no-cache-dir --upgrade -r requirements.txt
 
+## Download all npm dependencies and compile frontend
+#RUN reflex export --frontend-only --no-zip && mv .web/_static/* /srv/ && rm -rf .web
+#
+## Needed until Reflex properly passes SIGTERM on backend.
+#STOPSIGNAL SIGKILL
+
+ENV PATH="/app/prompt_order_experiment:$PATH"
+
 COPY --chown=user . /app
-ENTRYPOINT ["reflex", "run", "--env", "prod", "--loglevel", "debug" ]
+ENTRYPOINT ["reflex", "run", "--env", "dev", "--loglevel", "debug" ]

prompt_order_exeriment/pages/__init__.py

@@ -0,0 +1,3 @@
+from .index import page as index
+from .overview import page as overview
+from .results import page as results

prompt_order_exeriment/pages/index.py

@@ -0,0 +1,79 @@
+import reflex as rx
+
+from ..sidebar import sidebar
+
+p1 = '''
+# Prompt Order Experiment
+This experiment aims to explore various scenarios for **prompt fine-tuning** using structured generation. We'll test how the order of elements in a prompt affects model performance. The elements we consider are:
+- **(Q)**: Question
+- **(AC)**: Answer Choices
+- **(R)**: Reasoning
+- **(FA)**: Final Answer
+
+## Scenarios
+We will evaluate the following prompt orders:
+
+### **Scenario 1: Q - AC - R - FA** (Mistral and GPT3.5)
+
+This is the most natural order. The model generates reasoning before the final answer, providing the most information prior to making a selection. This order leverages decoding mechanics effectively.
+
+This is our user message, we can see the question and answer choices
+
+<details>
+<summary>Click to show prompt!</summary>
+
+```text
+<seq>[INST] Answer the Question and include your Reasoning and the Final Answer in a json like: {"Reasoning: "...", "Final Answer": "x"} where x is a letter that corresponds to the answer choice which is a letter between a and h.
+Question: What is satellite technology used for predicting?
+Answer Choices: (a) Seconds and minutes (b) The strength and magnitude of an earthquake (c) What it's like outside each day (d) 70-75 degrees fahrenheit (e) Rapid changes occur (f) Dead-ends and false starts. (g) Snow, ice, and rock (h) Around 5 to 27 degrees celsius[/INST]
+```
+
+This is our assistant message, you can see that we are forcing a JSON (note I added spacing for visual purposes), and we are putting the reasoning first. Using a JSON in fine-tuning will improve our structured generation results as the model will get used to responding in that "space".
+```text
+{
+  "Reasoning": "a) Seconds and minutes: This option is incorrect because satellite technology is not used for predicting time intervals. Satellite technology is used for various purposes such as communication, navigation, and weather forecasting, but it is not used for predicting time intervals.\n\nb) The strength and magnitude of an earthquake: This option is incorrect because satellite technology is not used for predicting earthquakes. Earthquake prediction is a complex process that involves seismology and other scientific methods, but satellite technology is not one of them.\n\nd) 70-75 degrees Fahrenheit: This option is incorrect because satellite technology is not used for predicting specific temperature ranges. While satellite technology can provide temperature data, it is not used for predicting specific temperature ranges.\n\ne) Rapid changes occur: This option is too vague and does not provide enough information to determine whether it is correct or not. Satellite technology can be used to monitor changes in various environmental factors, but it is not used specifically for predicting rapid changes.\n\nf) Dead-ends and false starts: This option is incorrect because it is not related to satellite technology or any type of prediction.\n\ng) Snow, ice, and rock: This option is incorrect because it is too specific and does not cover the broad range of predictions that satellite technology can be used for. While satellite technology can be used to monitor snow, ice, and rock formations, it is not used exclusively for this purpose.\n\nh) Around 5 to 27 degrees Celsius: This option is incorrect because it is too specific and does not cover the broad range of temperature predictions that satellite technology can be used for. While satellite technology can provide temperature data, it is not used exclusively for predicting temperatures within a specific range.\n\nTherefore, the correct answer is c) what it's like outside each day, as satellite technology is commonly used for weather forecasting and predicting daily weather conditions.",
+  "Final Answer": "c"
+}</seq>
+```
+</details>
+
+### **Scenario 2: Q - AC - FA - R** (Mistral and GPT3.5)
+
+An awkward order, placing reasoning after the final answer. While it is faster, it assumes the model can "know" reasoning internally before generating it. This approach saves tokens but is a skeptical case worth testing.
+
+<details>
+<summary>Click to show prompt!</summary>
+```text
+<seq>[INST] Answer the Question and include your Final Answer and the Reasoning in a json like: {"Final Answer": "x", "Reasoning: "..."} where x is a letter that corresponds to the answer choice which is a letter between a and h.
+Question: What is satellite technology used for predicting?
+Answer Choices: (a) Seconds and minutes (b) The strength and magnitude of an earthquake (c) What it's like outside each day (d) 70-75 degrees fahrenheit (e) Rapid changes occur (f) Dead-ends and false starts. (g) Snow, ice, and rock (h) Around 5 to 27 degrees celsius[/INST]
+```
+
+```text
+{
+    'Final Answer': 'c', 
+    'Reasoning': "a) Seconds and minutes: This option is incorrect because satellite technology is not used for predicting time intervals. Satellite technology is used for various purposes such as communication, navigation, and weather forecasting, but it is not used for predicting time intervals.\n\nb) The strength and magnitude of an earthquake: This option is incorrect because satellite technology is not used for predicting earthquakes. Earthquake prediction is a complex process that involves seismology and other scientific methods, but satellite technology is not one of them.\n\nd) 70-75 degrees Fahrenheit: This option is incorrect because satellite technology is not used for predicting specific temperature ranges. While satellite technology can provide temperature data, it is not used for predicting specific temperature ranges.\n\ne) Rapid changes occur: This option is too vague and does not provide enough information to determine whether it is correct or not. Satellite technology can be used to monitor changes in various environmental factors, but it is not used specifically for predicting rapid changes.\n\nf) Dead-ends and false starts: This option is incorrect because it is not related to satellite technology or any type of prediction.\n\ng) Snow, ice, and rock: This option is incorrect because it is too specific and does not cover the broad range of predictions that satellite technology can be used for. While satellite technology can be used to monitor snow, ice, and rock formations, it is not used exclusively for this purpose.\n\nh) Around 5 to 27 degrees Celsius: This option is incorrect because it is too specific and does not cover the broad range of temperature predictions that satellite technology can be used for. While satellite technology can provide temperature data, it is not used exclusively for predicting temperatures within a specific range.\n\nTherefore, the correct answer is c) what it's like outside each day, as satellite technology is commonly used for weather forecasting and predicting daily weather conditions."
+}</seq>
+```
+</details>
+
+### **Scenario 3: Q - AC - FA**
+
+This serves as a fine-tuning control. No reasoning is provided in the output.
+
+### **Scenario 4: Base**
+
+An un-fine-tuned control for comparison purposes.
+
+### Structured Generation
+Structured generation ensures consistent response formats, which is crucial for reliable fine-tuning. Initial experiments faced difficulties with response consistency and structured generation can solve this.
+'''
+
+
+def page():
+    return rx.hstack(
+            sidebar(),
+            rx.vstack(
+                    rx.markdown(p1),
+                    )
+            )

prompt_order_exeriment/pages/overview.py

@@ -0,0 +1,46 @@
+import reflex as rx
+
+from ..sidebar import sidebar
+
+p2 = '''
+# Steps 
+### Dataset Selection
+We begin with the [layoric/labeled-multiple-choice-explained](https://huggingface.co/datasets/layoric/labeled-multiple-choice-explained) dataset, which includes reasoning provided by GPT-3.5-turbo. reasoning explanations serve as a starting point but may differ from Mistral's reasoning style.
+
+0. *[00-poe-generate-mistral-reasoning.ipynb](https://huggingface.co/derek-thomas/prompt-order-experiment/blob/main/00-poe-generate-mistral-reasoning.ipynb)*: To align with Mistral, we need to create a refined dataset: [derek-thomas/labeled-multiple-choice-explained-mistral-reasoning](https://huggingface.co/datasets/derek-thomas/labeled-multiple-choice-explained-mistral-reasoning).
+1. *[01-poe-dataset-creation.ipynb](https://huggingface.co/derek-thomas/prompt-order-experiment/blob/main/01-poe-dataset-creation.ipynb)*: Then we need to create our prompt experiments.
+2. *[02-autotrain.ipynb](https://huggingface.co/derek-thomas/prompt-order-experiment/blob/main/02-autotrain.ipynb)*: We generate autotrain jobs on spaces to train our models.
+3. *[03-poe-token-count-exploration.ipynb](https://huggingface.co/derek-thomas/prompt-order-experiment/blob/main/03-poe-token-count-exploration.ipynb)*: We do some quick analysis so we can optimize our TGI settings.
+4. *[04-poe-eval.ipynb](https://huggingface.co/derek-thomas/prompt-order-experiment/blob/main/04-poe-eval.ipynb)*: We finally evaluate our trained models.
+
+**The flowchart is _Clickable_**
+'''
+
+
+def mermaid_svg():
+    with open('assets/prompt-order-experiment.svg', 'r') as file:
+        svg_content = file.read()
+
+    return rx.html(
+            f'<div style="width: 300%; height: auto;">{svg_content}</div>'
+            )
+
+
+def overview():
+    return rx.hstack(
+            sidebar(),
+            rx.vstack(
+                    rx.markdown(p2),
+                    mermaid_svg(),
+                    )
+            )
+
+
+def page():
+    return rx.hstack(
+            sidebar(),
+            rx.vstack(
+                    rx.markdown(p2),
+                    mermaid_svg(),
+                    )
+            )

prompt_order_exeriment/pages/results.py

@@ -0,0 +1,116 @@
+import reflex as rx
+import pandas as pd
+import plotly.express as px
+from reflex_ag_grid import ag_grid
+from sklearn.metrics import accuracy_score
+from ..sidebar import sidebar
+from datasets import load_dataset
+
+chart_md = """
+Make sure you explore what happeened between:
+- Base Model -> Final Answer
+- Base Model -> Reasoning (Both models) Final Answer 
+- Base Model -> Final Answer Reasoning (Both models)
+"""
+
+# Load the HF dataset
+dataset = load_dataset("derek-thomas/labeled-multiple-choice-explained-mistral-results")
+
+# Convert the dataset to a Pandas DataFrame
+df = dataset['train'].to_pandas()
+
+# Columns to analyze
+cols_to_analyze = [
+    "predictions_base",
+    "predictions_FA",
+    "predictions_RFA_mistral",
+    "predictions_FAR_mistral",
+    "predictions_RFA_gpt3_5",
+    "predictions_FAR_gpt3_5",
+    ]
+
+# Mapping for renaming models
+model_names = {
+    "predictions_base": "Base Model",
+    "predictions_FA": "Final Answer",
+    "predictions_RFA_mistral": "Reasoning (Mistral) -> Final Answer)",
+    "predictions_FAR_mistral": "Final Answer -> Reasoning (Mistral)",
+    "predictions_RFA_gpt3_5": "Reasoning (GPT-3.5 ) -> Final Answer",
+    "predictions_FAR_gpt3_5": "Final Answer -> Reasoning(GPT-3.5)",
+    }
+
+# Compute metrics for each model
+metrics_data = []
+for col in cols_to_analyze:
+    accuracy = round(accuracy_score(df["answer_key"], df[col]) * 100, 2)
+    metrics_data.append({"Prediction Type": model_names[col], "Accuracy (%)": accuracy})
+
+# Create a DataFrame for metrics
+metrics_df = pd.DataFrame(metrics_data)
+
+# Column definitions for the metrics table
+metrics_column_defs = [
+    ag_grid.column_def(field="Prediction Type", header_name="Prediction Type", width=250),
+    ag_grid.column_def(field="Accuracy (%)", header_name="Accuracy (%)"),
+    ]
+
+
+# Function to generate the topic performance star chart
+def topic_star_chart():
+    # Calculate per-topic accuracy
+    topic_accuracy = []
+    for topic in df["topic"].unique():
+        topic_data = df[df["topic"] == topic]
+        for col in cols_to_analyze:
+            accuracy = round((topic_data[col] == topic_data["answer_key"]).mean() * 100, 2)
+            topic_accuracy.append({"Topic": topic, "Prediction Type": model_names[col], "Accuracy (%)": accuracy})
+
+    # Create DataFrame for visualization
+    topic_df = pd.DataFrame(topic_accuracy)
+
+    # Find the top 10 topics by number of rows
+    topic_counts = df["topic"].value_counts().head(10).index
+    filtered_topic_df = topic_df[topic_df["Topic"].isin(topic_counts)]
+
+    # Create star chart (radar chart)
+    fig = px.line_polar(
+            filtered_topic_df,
+            r="Accuracy (%)",
+            theta="Topic",
+            color="Prediction Type",
+            title="Top 10 Topics: Per-Topic Performance Star Chart",
+            line_close=True,  # Close the lines to form a star shape
+            )
+    fig.update_layout(width=900, height=900)
+
+    return fig
+
+
+def page():
+    return rx.hstack(
+            sidebar(),
+            rx.vstack(
+                    rx.heading("Results", size="9", margin="20px 0"),
+                    rx.markdown("Here we have a sortable table of our experiments and the results"),
+                    ag_grid(
+                            id="ag_grid_metrics",
+                            row_data=metrics_df.to_dict("records"),
+                            column_defs=metrics_column_defs,
+                            width="60%",
+                            margin="20px auto",  # Center the table
+                            size_columns_to_fit=True
+                            ),
+                    rx.markdown("\n---\n"),
+                    rx.divider(),
+                    rx.heading("Performance Star Chart", size="8", margin="20px 0"),
+                    rx.text(
+                            "The chart below shows how each model performed across the most popular top 10 topics by row count. "
+                            "Each line represents a model, and the radial axis represents accuracy.",
+                            font_size="md",
+                            padding="10px",
+                            ),
+                    rx.markdown(chart_md),
+                    rx.plotly(data=topic_star_chart()),  # Render the radar chart
+                    padding="20px",
+                    )
+            )

prompt_order_exeriment/prompt_order_exeriment.py

@@ -1,220 +1,9 @@
-import pandas as pd
-import plotly.express as px
 import reflex as rx
-from datasets import load_dataset
-from reflex_ag_grid import ag_grid
-from sklearn.metrics import accuracy_score
-
-from .sidebar import sidebar
-
-# Load the HF dataset
-dataset = load_dataset("derek-thomas/labeled-multiple-choice-explained-mistral-results")
-
-# Convert the dataset to a Pandas DataFrame
-df = dataset['train'].to_pandas()
-
-# Columns to analyze
-cols_to_analyze = [
-    "predictions_base",
-    "predictions_FA",
-    "predictions_RFA_mistral",
-    "predictions_FAR_mistral",
-    "predictions_RFA_gpt3_5",
-    "predictions_FAR_gpt3_5",
-    ]
-
-# Mapping for renaming models
-model_names = {
-    "predictions_base": "Base Model",
-    "predictions_FA": "Final Answer",
-    "predictions_RFA_mistral": "Reasoning (Mistral) -> Final Answer)",
-    "predictions_FAR_mistral": "Final Answer -> Reasoning (Mistral)",
-    "predictions_RFA_gpt3_5": "Reasoning (GPT-3.5 ) -> Final Answer",
-    "predictions_FAR_gpt3_5": "Final Answer -> Reasoning(GPT-3.5)",
-    }
-
-# Compute metrics for each model
-metrics_data = []
-for col in cols_to_analyze:
-    accuracy = round(accuracy_score(df["answer_key"], df[col]) * 100, 2)
-    metrics_data.append({"Prediction Type": model_names[col], "Accuracy (%)": accuracy})
-
-# Create a DataFrame for metrics
-metrics_df = pd.DataFrame(metrics_data)
-
-# Column definitions for the metrics table
-metrics_column_defs = [
-    ag_grid.column_def(field="Prediction Type", header_name="Prediction Type", width=250),
-    ag_grid.column_def(field="Accuracy (%)", header_name="Accuracy (%)"),
-    ]
-
-
-# Function to generate the topic performance star chart
-def topic_star_chart():
-    # Calculate per-topic accuracy
-    topic_accuracy = []
-    for topic in df["topic"].unique():
-        topic_data = df[df["topic"] == topic]
-        for col in cols_to_analyze:
-            accuracy = round((topic_data[col] == topic_data["answer_key"]).mean() * 100, 2)
-            topic_accuracy.append({"Topic": topic, "Prediction Type": model_names[col], "Accuracy (%)": accuracy})
-
-    # Create DataFrame for visualization
-    topic_df = pd.DataFrame(topic_accuracy)
-
-    # Find the top 10 topics by number of rows
-    topic_counts = df["topic"].value_counts().head(10).index
-    filtered_topic_df = topic_df[topic_df["Topic"].isin(topic_counts)]
-
-    # Create star chart (radar chart)
-    fig = px.line_polar(
-            filtered_topic_df,
-            r="Accuracy (%)",
-            theta="Topic",
-            color="Prediction Type",
-            title="Top 10 Topics: Per-Topic Performance Star Chart",
-            line_close=True,  # Close the lines to form a star shape
-            )
-    fig.update_layout(width=900, height=900)
-
-    return fig
-
-
-p1 = '''
-# Prompt Order Experiment
-## 🎯 Goal
-This experiment aims to explore various scenarios for **prompt fine-tuning** using structured generation. We'll test how the order of elements in a prompt affects model performance. The elements we consider are:
-- **(Q)**: Question
-- **(AC)**: Answer Choices
-- **(R)**: Reasoning
-- **(FA)**: Final Answer
-
-### Scenarios
-We will evaluate the following prompt orders:
-
-1. **Scenario 1: `Q - AC - R - FA`** (Mistral and GPT3.5)
-   - This is the most natural order. The model generates reasoning before the final answer, providing the most information prior to making a selection. This order leverages decoding mechanics effectively.
-
-This is our user message, we can see the question and answer choices
-<details>
-<summary>Click to show prompt!</summary>
-```
-\<s>[INST] Answer the Question and include your Reasoning and the Final Answer in a json like: {"Reasoning: "...", "Final Answer": "x"} where x is a letter that corresponds to the answer choice which is a letter between a and h.
-Question: What is satellite technology used for predicting?
-Answer Choices: (a) Seconds and minutes (b) The strength and magnitude of an earthquake (c) What it's like outside each day (d) 70-75 degrees fahrenheit (e) Rapid changes occur (f) Dead-ends and false starts. (g) Snow, ice, and rock (h) Around 5 to 27 degrees celsius[/INST]
-```
-
-This is our assistant message, you can see that we are forcing a JSON (note I added spacing for visual purposes), and we are putting the reasoning first. 
-```
-{
-  "Reasoning": "a) Seconds and minutes: This option is incorrect because satellite technology is not used for predicting time intervals. Satellite technology is used for various purposes such as communication, navigation, and weather forecasting, but it is not used for predicting time intervals.\n\nb) The strength and magnitude of an earthquake: This option is incorrect because satellite technology is not used for predicting earthquakes. Earthquake prediction is a complex process that involves seismology and other scientific methods, but satellite technology is not one of them.\n\nd) 70-75 degrees Fahrenheit: This option is incorrect because satellite technology is not used for predicting specific temperature ranges. While satellite technology can provide temperature data, it is not used for predicting specific temperature ranges.\n\ne) Rapid changes occur: This option is too vague and does not provide enough information to determine whether it is correct or not. Satellite technology can be used to monitor changes in various environmental factors, but it is not used specifically for predicting rapid changes.\n\nf) Dead-ends and false starts: This option is incorrect because it is not related to satellite technology or any type of prediction.\n\ng) Snow, ice, and rock: This option is incorrect because it is too specific and does not cover the broad range of predictions that satellite technology can be used for. While satellite technology can be used to monitor snow, ice, and rock formations, it is not used exclusively for this purpose.\n\nh) Around 5 to 27 degrees Celsius: This option is incorrect because it is too specific and does not cover the broad range of temperature predictions that satellite technology can be used for. While satellite technology can provide temperature data, it is not used exclusively for predicting temperatures within a specific range.\n\nTherefore, the correct answer is c) what it's like outside each day, as satellite technology is commonly used for weather forecasting and predicting daily weather conditions.",
-  "Final Answer": "c"
-}</s>
-```
-</details>
-
-2. **Scenario 2: `Q - AC - FA - R`** (Mistral and GPT3.5)
-   - An awkward order, placing reasoning after the final answer. While it is faster, it assumes the model can "know" reasoning internally before generating it. This approach saves tokens but is a skeptical case worth testing.
-
-<details>
-<summary>Click to show prompt!</summary>
-```
-\<s>[INST] Answer the Question and include your Final Answer and the Reasoning in a json like: {"Final Answer": "x", "Reasoning: "..."} where x is a letter that corresponds to the answer choice which is a letter between a and h.
-Question: What is satellite technology used for predicting?
-Answer Choices: (a) Seconds and minutes (b) The strength and magnitude of an earthquake (c) What it's like outside each day (d) 70-75 degrees fahrenheit (e) Rapid changes occur (f) Dead-ends and false starts. (g) Snow, ice, and rock (h) Around 5 to 27 degrees celsius[/INST] 
-```
-
-```
-{
-    'Final Answer': 'c', 
-    'Reasoning': "a) Seconds and minutes: This option is incorrect because satellite technology is not used for predicting time intervals. Satellite technology is used for various purposes such as communication, navigation, and weather forecasting, but it is not used for predicting time intervals.\n\nb) The strength and magnitude of an earthquake: This option is incorrect because satellite technology is not used for predicting earthquakes. Earthquake prediction is a complex process that involves seismology and other scientific methods, but satellite technology is not one of them.\n\nd) 70-75 degrees Fahrenheit: This option is incorrect because satellite technology is not used for predicting specific temperature ranges. While satellite technology can provide temperature data, it is not used for predicting specific temperature ranges.\n\ne) Rapid changes occur: This option is too vague and does not provide enough information to determine whether it is correct or not. Satellite technology can be used to monitor changes in various environmental factors, but it is not used specifically for predicting rapid changes.\n\nf) Dead-ends and false starts: This option is incorrect because it is not related to satellite technology or any type of prediction.\n\ng) Snow, ice, and rock: This option is incorrect because it is too specific and does not cover the broad range of predictions that satellite technology can be used for. While satellite technology can be used to monitor snow, ice, and rock formations, it is not used exclusively for this purpose.\n\nh) Around 5 to 27 degrees Celsius: This option is incorrect because it is too specific and does not cover the broad range of temperature predictions that satellite technology can be used for. While satellite technology can provide temperature data, it is not used exclusively for predicting temperatures within a specific range.\n\nTherefore, the correct answer is c) what it's like outside each day, as satellite technology is commonly used for weather forecasting and predicting daily weather conditions."
-}</s>
-```
-</details>
-
-3. **Scenario 3: `Q - AC - FA`**
-   - This serves as a fine-tuning control. No reasoning is provided in the output.
-
-4. **Scenario 4: Base**
-   - An un-fine-tuned control for comparison purposes.
-
-### Structured Generation
-Structured generation ensures consistent response formats, which is crucial for reliable fine-tuning. Initial experiments faced difficulties with response consistency and structured generation can solve this.
-
-'''
-
-p2 = '''
-# Steps 
-### Dataset Selection
-We begin with the [layoric/labeled-multiple-choice-explained](https://huggingface.co/datasets/layoric/labeled-multiple-choice-explained) dataset, which includes reasoning provided by GPT-3.5-turbo. reasoning explanations serve as a starting point but may differ from Mistral's reasoning style.
-
-0. 00-poe-generate-mistral-reasoning.ipynb: To align with Mistral, we need to create a refined dataset: [derek-thomas/labeled-multiple-choice-explained-mistral-reasoning](https://huggingface.co/datasets/derek-thomas/labeled-multiple-choice-explained-mistral-reasoning) with [poe-generate-mistral-reasoning.ipynb](./poe-generate-mistral-reasoning.ipynb).
-1. 01-poe-dataset-creation.ipynb: Then we need to create our prompt experiments 
-2. 02-autotrain.ipynb: We generate autotrain jobs on spaces to train our models
-3. 03-poe-token-count-exploration.ipynb: We do some quick analysis so we can optimize our TGI settings
-4. 04-poe-eval.ipynb: We finally evaluate our trained models
-
-'''
-
-
-def mermaid_svg():
-    with open('assets/prompt-order-experiment.svg', 'r') as file:
-        svg_content = file.read()
-
-    return rx.html(
-            f'<div style="width: 300%; height: auto;">{svg_content}</div>'
-            )
-
-
-def overview():
-    return rx.hstack(
-            sidebar(),
-            rx.vstack(
-                    rx.markdown(p2),
-                    mermaid_svg(),
-                    )
-            )
-
-
-def results():
-    return rx.hstack(
-            sidebar(),
-            rx.vstack(
-                    rx.heading("Results", size="8", margin="20px 0"),
-                    # rx.markdown(diagram),
-                    ag_grid(
-                            id="ag_grid_metrics",
-                            row_data=metrics_df.to_dict("records"),
-                            column_defs=metrics_column_defs,
-                            width="60%",
-                            margin="20px auto",  # Center the table
-                            ),
-                    rx.divider(),
-                    rx.heading("Top 10 Topics: Per-Topic Performance Star Chart", size="8", margin="20px 0"),
-                    rx.text(
-                            "The chart below shows how each model performed across the top 10 topics by row count. "
-                            "Each line represents a model, and the chart allows you to compare their performance across topics.",
-                            font_size="md",
-                            padding="10px",
-                            ),
-                    rx.plotly(data=topic_star_chart()),  # Render the radar chart
-                    padding="20px",
-
-                    )
-            )
-
-
-# Main page of the Reflex app
-def index():
-    return rx.hstack(
-            sidebar(),
-            rx.vstack(
-                    rx.markdown(p1),
-            ))
 
+from .pages import index, overview, results
 
 # Initialize the Reflex app with polished layout
 app = rx.App()
-app.add_page(overview, title='Overview', route='/overview')  # Add the index page
-app.add_page(results, title='Results', route='/results')  # Add the index page
-app.add_page(index)  # Add the index page
+app.add_page(overview, title='Overview', route='/overview')  # Overview page
+app.add_page(results, title='Results', route='/results')  # Results page
+app.add_page(index, title='Index', route='/')  # Index page