upload files

Dockerfile

@@ -0,0 +1,12 @@
+FROM python:3.12
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+EXPOSE 3478
+
+CMD ["python", "app.py"]

Longformer_checkpoint/config.json

@@ -0,0 +1,56 @@
+{
+  "architectures": [
+    "CustomLongformerForSequenceClassification"
+  ],
+  "attention_mode": "longformer",
+  "attention_probs_dropout_prob": 0.1,
+  "attention_window": [
+    512,
+    512,
+    512,
+    512,
+    512,
+    512,
+    512,
+    512,
+    512,
+    512,
+    512,
+    512
+  ],
+  "bos_token_id": 0,
+  "eos_token_id": 2,
+  "gradient_checkpointing": false,
+  "hidden_act": "gelu",
+  "hidden_dropout_prob": 0.1,
+  "hidden_size": 768,
+  "id2label": {
+    "0": "LABEL_0",
+    "1": "LABEL_1",
+    "2": "LABEL_2",
+    "3": "LABEL_3"
+  },
+  "ignore_attention_mask": false,
+  "initializer_range": 0.02,
+  "intermediate_size": 3072,
+  "label2id": {
+    "LABEL_0": 0,
+    "LABEL_1": 1,
+    "LABEL_2": 2,
+    "LABEL_3": 3
+  },
+  "layer_norm_eps": 1e-05,
+  "max_position_embeddings": 4098,
+  "model_type": "longformer",
+  "num_attention_heads": 12,
+  "num_hidden_layers": 12,
+  "onnx_export": false,
+  "output_hidden_states": true,
+  "pad_token_id": 1,
+  "problem_type": "regression",
+  "sep_token_id": 2,
+  "torch_dtype": "float32",
+  "transformers_version": "4.51.3",
+  "type_vocab_size": 1,
+  "vocab_size": 50265
+}

app.py

@@ -0,0 +1,6 @@
+from my_app import create_app
+
+app = create_app()
+
+if __name__ == '__main__':
+    app.run(debug=True,host='0.0.0.0')

configs.py

@@ -0,0 +1,3 @@
+SECRET_KEY = 'secret_key_here'
+SQLALCHEMY_DATABASE_URI = 'sqlite:///users.db'
+SQLALCHEMY_TRACK_MODIFICATIONS = False

data/dataset.py

@@ -0,0 +1,26 @@
+import torch
+class EssayDataset(torch.utils.data.Dataset):
+    def __init__(self, dataframe, tokenizer, max_length):
+        self.data = dataframe
+        self.tokenizer = tokenizer
+        self.max_length = max_length
+        
+    def __len__(self):
+        return len(self.data)
+    
+    def __getitem__(self, idx):
+        text = self.data.iloc[idx]['train_input']
+        labels = self.data.iloc[idx]['labels']
+        encoding = self.tokenizer(
+            text,
+            max_length=self.max_length,
+            padding='max_length',
+            truncation=True,
+            return_tensors='pt'
+        )
+        return {
+            'input_ids': encoding['input_ids'].flatten(),
+            'attention_mask': encoding['attention_mask'].flatten(),
+            'labels': torch.tensor(labels, dtype=torch.float)
+        }
+    

inference/infer_single.py

@@ -0,0 +1,85 @@
+from utils.data_utils import *
+from utils.prompts import *
+import torch
+from my_app import * 
+
+def replace_single_newlines(text):
+    return re.sub(r'(?<!\n)\n(?!\n)', '\\\\n\\\\n', text)
+
+def generate_full_prompt(topic, essay, cefr_stat):
+    essay = replace_single_newlines(essay)
+    paragraph_cnt = len(essay.replace('\\n\\n', '\\n').split('\\n'))
+    word_cnt = len(essay.split())
+    stat = f"The essay has {word_cnt} words and {paragraph_cnt} paragraphs.\n"
+    full_prompt = feedback_prompt_1 + "\n ##{{PROMPT}}\n```\n" + topic + "\n```\n ##{{ESSAY}}\n```\n" + essay + "\n```\n##CEFR Analysis\n" + str(cefr_stat) + "\n\n##{{STATS}}\n" + stat + '\n' + feedback_prompt_2
+    return full_prompt
+
+
+def generate_and_score_essay(topic, essay):
+    global MODELS_LOADED, LONGFORMER_TOKENIZER, LONGFORMER_MODEL, QWEN_TOKENIZER, QWEN_MODEL
+    device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+    LONGFORMER_MODEL = LONGFORMER_MODEL.to(device)
+    QWEN_MODEL = QWEN_MODEL.to(device)
+
+    cefr_results = get_cefr_stats(essay)
+    full_prompt = generate_full_prompt(topic=topic, essay=essay, cefr_stat=cefr_results)
+    essay = replace_single_newlines(essay)
+    paragraph_cnt = len(essay.replace('\\n\\n', '\\n').split('\\n'))
+    text = QWEN_TOKENIZER.apply_chat_template(
+                [{"role": "user", "content": full_prompt}],
+                tokenize=False,
+                add_generation_prompt=True,
+                enable_thinking=False
+            )
+    inputs = QWEN_TOKENIZER(
+        text,
+        return_tensors="pt",
+        padding=True,
+        truncation=True,
+        padding_side='left'
+    ).to(device)
+    with torch.inference_mode():
+        outputs = QWEN_MODEL.generate(
+            **inputs,
+            max_new_tokens=1500,
+            use_cache=True, 
+            pad_token_id=QWEN_TOKENIZER.eos_token_id
+        )
+    generated_ids = outputs[0][inputs.input_ids.shape[1]:]
+    full_feedback = QWEN_TOKENIZER.decode(
+        generated_ids,
+        skip_special_tokens=True,
+        clean_up_tokenization_spaces=True  # Fix spaces/newlines
+    )
+    output_match = re.search(r"{(.*?)}", full_feedback, re.DOTALL)
+    response = output_match.group(1).strip() if output_match else full_feedback
+    feedback_components = extract_feedback_keys_values(response)
+    feedback_components = dict(feedback_components)
+    feedback_components['word_count'] = len(essay.split())
+    feedback_components['paragraph_count'] = paragraph_cnt
+    feedback_components['cefr_stat'] = cefr_results
+    score_input = create_train_input({
+    'topic': topic,
+    'essay': essay,
+    'Corrected_essay': feedback_components.get('Corrected_essay', ''),
+    'TR_feedback': feedback_components.get('TR_feedback', ''),
+    'CC_feedback': feedback_components.get('CC_feedback', ''),
+    'LR_feedback': feedback_components.get('LR_feedback', ''),
+    'GRA_feedback': feedback_components.get('GRA_feedback', ''),
+    'word_count':feedback_components.get('word_count', ''),
+    'paragraph_count': feedback_components.get('paragraph_count', ''),
+    'cefr_stat': feedback_components.get('cefr_stat', '')
+    })
+    score_inputs = LONGFORMER_TOKENIZER(
+        score_input,
+        return_tensors="pt",
+        max_length=2048,
+        truncation=True,
+        padding=True
+    ).to(device)
+    LONGFORMER_MODEL.eval()
+    with torch.no_grad():
+        outputs = LONGFORMER_MODEL(**score_inputs)  # Get full outputs dictionary
+        scores = outputs['logits'].cpu().numpy()
+    scores = [round(x) for x in scores[0]]
+    return scores, feedback_components

init.sh

@@ -0,0 +1 @@
+python -m spacy download en_core_web_sm

models/model.py

@@ -0,0 +1,144 @@
+import torch
+import torch.nn as nn
+from transformers import LongformerPreTrainedModel, LongformerModel
+import torch.nn.functional as F
+
+class AttentionPooling(nn.Module):
+    def __init__(self, hidden_dim):
+        super().__init__()
+        self.hidden_dim = hidden_dim
+        self.query = nn.Linear(hidden_dim, hidden_dim)
+        self.energy = nn.Linear(hidden_dim, 1)
+        
+        # Initialize weights
+        nn.init.xavier_uniform_(self.query.weight)
+        nn.init.xavier_uniform_(self.energy.weight)
+        self.query.bias.data.zero_()
+        self.energy.bias.data.zero_()
+
+    def forward(self, hidden_states, attention_mask=None):
+        # Compute attention scores
+        transformed = torch.tanh(self.query(hidden_states))  # (batch_size, seq_len, hidden_dim)
+        scores = self.energy(transformed).squeeze(-1)  # (batch_size, seq_len)
+        
+        # Apply attention mask if provided
+        if attention_mask is not None:
+            scores = scores.masked_fill(attention_mask == 0, float('-inf'))
+        
+        # Compute attention weights
+        weights = F.softmax(scores, dim=-1)  # (batch_size, seq_len)
+        
+        # Apply attention pooling
+        pooled = torch.sum(hidden_states * weights.unsqueeze(-1), dim=1)  # (batch_size, hidden_dim)
+        return pooled
+
+
+
+class CustomLongformerForSequenceClassification(LongformerPreTrainedModel):
+    """Longformer model with attention pooling for sequence classification.
+    
+    Uses attention pooling over the last four hidden layers instead of CLS token pooling.
+    """
+    def __init__(self, config):
+        super().__init__(config)
+        self.num_labels = config.num_labels
+        self.config = config
+        
+        # Longformer backbone
+        self.longformer = LongformerModel(config)
+        self.dropout = nn.Dropout(config.hidden_dropout_prob)
+        
+        # Attention pooling for each layer
+        self.attention_poolers = nn.ModuleList([
+            AttentionPooling(config.hidden_size) for _ in range(4)
+        ])
+        
+        # Final classifier
+        self.classifier = nn.Linear(config.hidden_size * 4, config.num_labels)
+        
+        # Initialize weights
+        self.post_init()
+
+    def forward(self, input_ids=None, attention_mask=None, labels=None, **kwargs):
+        outputs = self.longformer(
+            input_ids=input_ids,
+            attention_mask=attention_mask,
+            output_hidden_states=True,
+            **kwargs
+        )
+
+        # Get last four hidden layers
+        last_four_layers = outputs.hidden_states[-4:]
+        
+        # Apply attention pooling to each layer
+        pooled = []
+        for layer, pooler in zip(last_four_layers, self.attention_poolers):
+            pooled.append(pooler(layer, attention_mask=attention_mask))
+        
+        # Concatenate pooled representations
+        concatenated = torch.cat(pooled, dim=1)
+        concatenated = self.dropout(concatenated)
+        logits = self.classifier(concatenated)
+
+        # Compute loss if labels provided
+        loss = None
+        if labels is not None:
+            if hasattr(self, 'loss_fct'):
+                loss = self.loss_fct(logits, labels)
+            else:
+                loss = F.mse_loss(logits, labels.float())
+
+        return {'loss': loss, 'logits': logits}
+
+class CustomLongformerForSequenceClassification(LongformerPreTrainedModel):
+    """Longformer model with attention pooling for sequence classification."""
+    def __init__(self, config):
+        super().__init__(config)
+        self.num_labels = config.num_labels
+        self.config = config
+        
+        # Longformer backbone
+        self.longformer = LongformerModel(config)
+        self.dropout = nn.Dropout(config.hidden_dropout_prob)
+        
+        # Attention pooling for each layer
+        self.attention_poolers = nn.ModuleList([
+            AttentionPooling(config.hidden_size) for _ in range(4)
+        ])
+        
+        # Final classifier
+        self.classifier = nn.Linear(config.hidden_size * 4, config.num_labels)
+        
+        # Initialize weights
+        self.post_init()
+
+    def forward(self, input_ids=None, attention_mask=None, labels=None, **kwargs):
+        outputs = self.longformer(
+            input_ids=input_ids,
+            attention_mask=attention_mask,
+            output_hidden_states=True,
+            **kwargs
+        )
+
+        # Get last four hidden layers
+        last_four_layers = outputs.hidden_states[-4:]
+        
+        # Apply attention pooling to each layer
+        pooled = []
+        for layer, pooler in zip(last_four_layers, self.attention_poolers):
+            pooled.append(pooler(layer, attention_mask=attention_mask))
+        
+        # Concatenate pooled representations
+        concatenated = torch.cat(pooled, dim=1)
+        concatenated = self.dropout(concatenated)
+        logits = self.classifier(concatenated)
+
+        # Compute loss if labels provided
+        loss = None
+        if labels is not None:
+            if hasattr(self, 'loss_fct'):
+                loss = self.loss_fct(logits, labels)
+            else:
+                loss = F.mse_loss(logits.view(-1), labels.float().view(-1))
+
+        return {'loss': loss, 'logits': logits}

my_app/__init__.py

@@ -0,0 +1,63 @@
+from flask import Flask
+from flask_sqlalchemy import SQLAlchemy
+from flask_login import LoginManager
+from flask import render_template
+from transformers import LongformerTokenizer, AutoTokenizer, AutoModelForCausalLM, LongformerConfig
+from models.model import *
+from utils.util_func import *
+from safetensors.torch import load_file
+
+db = SQLAlchemy()
+login_manager = LoginManager()
+
+MODELS_LOADED = False
+LONGFORMER_TOKENIZER = None
+LONGFORMER_MODEL = None
+QWEN_TOKENIZER = None
+QWEN_MODEL = None
+MODEL_SESSION = None
+
+def load_models():
+    global MODELS_LOADED, LONGFORMER_TOKENIZER, LONGFORMER_MODEL, QWEN_TOKENIZER, QWEN_MODEL
+    device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+    if not MODELS_LOADED:
+        LONGFORMER_TOKENIZER = LongformerTokenizer.from_pretrained('allenai/longformer-base-4096', device='auto')
+        config = LongformerConfig.from_json_file("checkpoints/Longformer_checkpoint/config.json")
+        LONGFORMER_MODEL = CustomLongformerForSequenceClassification(config).from_pretrained('SFM2001/LongFormerScorer')
+        LONGFORMER_MODEL = LONGFORMER_MODEL.to(device)
+        LONGFORMER_MODEL.eval()
+        
+        model_name = 'Qwen/Qwen3-1.7B'
+        QWEN_TOKENIZER = AutoTokenizer.from_pretrained(model_name, device='auto')
+        QWEN_TOKENIZER.pad_token_id = QWEN_TOKENIZER.eos_token_id
+        QWEN_MODEL = AutoModelForCausalLM.from_pretrained(model_name, torch_dtype=torch.float16).half()
+        MODELS_LOADED = True
+
+def create_app():
+    set_seed(42)
+    load_models()
+    app = Flask(__name__)
+    app.config.from_pyfile('../configs.py')
+    db.init_app(app)
+    login_manager.init_app(app)
+    login_manager.login_view = 'auth.login'
+    @login_manager.user_loader
+    def load_user(user_id):
+        return User.query.get(int(user_id))
+
+    with app.app_context():
+        from .views import auth_bp, dashboard_bp, infer_bp, about_bp, error_bp
+        app.register_blueprint(auth_bp)
+        app.register_blueprint(dashboard_bp)
+        app.register_blueprint(infer_bp)
+        app.register_blueprint(about_bp)
+        app.register_blueprint(error_bp)
+        @app.errorhandler(Exception)
+        def handle_all_exceptions(e):
+            code = getattr(e, 'code', 500)
+            error_message = str(e) if hasattr(e, 'description') else "Something went wrong."
+            return render_template('error.html', code=code, error_message=error_message), code
+        from .database import User, History
+        db.create_all()
+    
+    return app

my_app/database.py

@@ -0,0 +1,28 @@
+from flask_login import UserMixin
+from werkzeug.security import generate_password_hash, check_password_hash
+from datetime import datetime
+from . import db
+
+class User(UserMixin, db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    email = db.Column(db.String(100), unique=True, nullable=False)
+    nickname = db.Column(db.String(100), unique=True, nullable=False)
+    password_hash = db.Column(db.String(200))
+
+    def set_password(self, password):
+        self.password_hash = generate_password_hash(password)
+
+    def check_password(self, password):
+        return check_password_hash(self.password_hash, password)
+
+class History(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    topic = db.Column(db.String(255), nullable=False)
+    essay = db.Column(db.Text, nullable=False)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    score_tr = db.Column(db.Integer, nullable=False)
+    score_cc = db.Column(db.Integer, nullable=False)
+    score_lr = db.Column(db.Integer, nullable=False)
+    score_gra = db.Column(db.Integer, nullable=False)
+    user = db.relationship('User', backref=db.backref('histories', lazy=True))

my_app/static/js/dashboard_charts.js

@@ -0,0 +1,191 @@
+function showModal(content) {
+    document.getElementById('content-text').innerText = content;
+    $('#contentModal').modal('show');
+}
+
+function selectAll(source) {
+    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+    for (let i = 0; i < checkboxes.length; i++) {
+        if (checkboxes[i] !== source)
+            checkboxes[i].checked = source.checked;
+    }
+}
+
+function initializeCharts(scoresTR, scoresCC, scoresLR, scoresGRA, creationTimes) {
+    const essayNumbers = [...Array(scoresTR.length).keys()].map(x => x + 1); // Array from 1 to the length of scores
+
+    const rubricChartData = {
+        labels: essayNumbers,
+        datasets: [
+            {
+                label: 'Task Response',
+                data: scoresTR,
+                borderColor: 'rgba(54, 162, 235, 1.0)',
+                backgroundColor: 'rgba(54, 162, 235, 0.6)',
+                fill: false,
+                pointRadius: 5
+            },
+            {
+                label: 'Coherence and Cohesion',
+                data: scoresCC,
+                borderColor: 'rgba(255, 99, 132, 1.0)',
+                backgroundColor: 'rgba(255, 99, 132, 0.6)',
+                fill: false,
+                pointRadius: 5
+            },
+            {
+                label: 'Lexical Resource',
+                data: scoresLR,
+                borderColor: 'rgba(75, 192, 192, 1.0)',
+                backgroundColor: 'rgba(75, 192, 192, 0.6)',
+                fill: false,
+                pointRadius: 5
+            },
+            {
+                label: 'Grammatical Range and Accuracy',
+                data: scoresGRA,
+                borderColor: 'rgba(153, 102, 255, 1.0)',
+                backgroundColor: 'rgba(153, 102, 255, 0.6)',
+                fill: false,
+                pointRadius: 5
+            }
+        ]
+    };
+
+    const rubricChartOptions = {
+        responsive: true,
+        plugins: {
+            tooltip: {
+                callbacks: {
+                    label: function (tooltipItem) {
+                        const index = tooltipItem.dataIndex;
+                        switch (tooltipItem.dataset.label) {
+                            case 'Task Response':
+                                return `Task Response Score: ${tooltipItem.raw}, Time: ${creationTimes[index]}`;
+                            case 'Coherence and Cohesion':
+                                return `Coherence and Cohesion Score: ${tooltipItem.raw}, Time: ${creationTimes[index]}`;
+                            case 'Lexical Resource':
+                                return `Lexical Resource Score: ${tooltipItem.raw}, Time: ${creationTimes[index]}`;
+                            case 'Grammatical Range and Accuracy':
+                                return `Grammatical Range and Accuracy Score: ${tooltipItem.raw}, Time: ${creationTimes[index]}`;
+                            default:
+                                return `Score: ${tooltipItem.raw}, Time: ${creationTimes[index]}`;
+                        }
+                    }
+                }
+            },
+            legend: {
+                display: true,
+                labels: {
+                    color: 'white',
+                    padding: 20
+                },
+                position: 'top',
+                align: 'center'
+            }
+        },
+        scales: {
+            x: {
+                title: {
+                    display: true,
+                    text: 'Essay Number',
+                    color: 'white'
+                },
+                ticks: {
+                    color: 'white'
+                },
+                grid: {
+                    display: true
+                }
+            },
+            y: {
+                title: {
+                    display: true,
+                    text: 'Score',
+                    color: 'white'
+                },
+                ticks: {
+                    color: 'white'
+                },
+                min: 0,
+                max: 10,
+                grid: {
+                    display: true,
+                    color: 'rgba(255, 255, 255, 0.2)'
+                }
+            }
+        }
+    };
+
+    new Chart(document.getElementById('RubricChart'), {
+        type: 'line',
+        data: rubricChartData,
+        options: rubricChartOptions
+    });
+
+    const essaysPerDay = {};
+    creationTimes.forEach(time => {
+        const date = time.split(' ')[0];
+        essaysPerDay[date] = (essaysPerDay[date] || 0) + 1;
+    });
+    const sortedEssaysArray = Object.entries(essaysPerDay).sort((a, b) => new Date(a[0]) - new Date(b[0]));
+    const sortedEssaysPerDay = Object.fromEntries(sortedEssaysArray);
+
+    const dates = Object.keys(sortedEssaysPerDay);
+    const essayCounts = Object.values(sortedEssaysPerDay);
+
+    const essayCountChartData = {
+        labels: dates,
+        datasets: [{
+            label: 'Essays Per Day',
+            data: essayCounts,
+            borderColor: 'rgba(255, 165, 0, 1.0)',
+            backgroundColor: 'rgba(145, 128, 128, 0.5)', 
+            fill: true,
+            pointRadius: 5
+        }]
+    };
+
+    const essayCountChartOptions = {
+        responsive: true,
+        plugins: {
+            legend: {
+                display: false
+            }
+        },
+        scales: {
+            x: {
+                title: {
+                    display: true,
+                    text: 'Date',
+                    color: 'white'
+                },
+                ticks: {
+                    color: 'white'
+                },
+                grid: {
+                    display: true
+                }
+            },
+            y: {
+                title: {
+                    display: true,
+                    text: 'Number of Essays',
+                    color: 'white'
+                },
+                ticks: {
+                    color: 'white'
+                },
+                grid: {
+                    display: true,
+                    color: 'rgba(255, 255, 255, 0.2)' // Light grid lines
+                }
+            }
+        }
+    };
+    new Chart(document.getElementById('EssayCountChart'), {
+        type: 'bar',
+        data: essayCountChartData,
+        options: essayCountChartOptions
+    });
+}

my_app/static/js/home_page.js

@@ -0,0 +1,65 @@
+$(document).ready(function() {
+    $('#toggle-sidebar').on('click', function() {
+        const sidebar = $('#sidebar');
+        sidebar.toggleClass('active');
+
+        if (sidebar.hasClass('active')) {
+            $(this).text("✖");
+        } else {
+            $(this).text("☰");
+        }
+    });
+
+    $('#close-sidebar').on('click', function() {
+        const sidebar = $('#sidebar');
+        sidebar.removeClass('active');
+        $('#toggle-sidebar').text("☰");
+    });
+
+    var isEmpty = $('#isempty').val() === 'True';
+    if (isEmpty) {
+        $('#alertModal').modal('show');
+    }
+
+    $('#essay').on('keydown', function(e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            var start = this.selectionStart;
+            var end = this.selectionEnd;
+            var text = this.value;
+            this.value = text.substring(0, start) + "\n" + text.substring(end);
+            this.selectionStart = this.selectionEnd = start + 1;
+        }
+    });
+
+    let countdownSeconds;
+    const countdownDisplay = document.getElementById("countdown-timer");
+    let countdownInterval;
+
+    function updateCountdown() {
+        const minutes = Math.floor(countdownSeconds / 60);
+        const seconds = countdownSeconds % 60;
+        countdownDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+        countdownSeconds--;
+        if (countdownSeconds >= 0) {
+            countdownInterval = setTimeout(updateCountdown, 1000);
+        } else {
+            countdownDisplay.textContent = "Time's up!";
+        }
+    }
+
+    $('#start-countdown').on('click', function() {
+        const time = countdownDisplay.textContent.trim();
+        const timeParts = time.split(':');
+        const minutesInput = parseInt(timeParts[0], 10) || 0;
+        const secondsInput = parseInt(timeParts[1], 10) || 0;
+        countdownSeconds = minutesInput * 60 + secondsInput;
+
+        clearTimeout(countdownInterval);
+        updateCountdown();
+    });
+
+    $('#stop-countdown').on('click', function() {
+        clearTimeout(countdownInterval);
+    });
+});

my_app/static/js/particles_init.js

@@ -0,0 +1,55 @@
+document.addEventListener("DOMContentLoaded", function () {
+    particlesJS("particles-js", {
+        "particles": {
+            "number": {
+                "value": 380,
+                "density": {
+                    "enable": true,
+                    "value_area": 800
+                }
+            },
+            "color": {
+                "value": "#b3b3cc"
+            },
+            "shape": {
+                "type": "circle",
+                "stroke": {
+                    "width": 0,
+                    "color": "#000000"
+                }
+            },
+            "opacity": {
+                "value": 0.5,
+                "random": false
+            },
+            "size": {
+                "value": 3,
+                "random": true
+            },
+            "line_linked": {
+                "enable": true,
+                "distance": 150,
+                "color": "#b3b3cc",
+                "opacity": 0.4,
+                "width": 1
+            },
+            "move": {
+                "enable": true,
+                "speed": 1
+            }
+        },
+        "interactivity": {
+            "events": {
+                "onhover": {
+                    "enable": true,
+                    "mode": "grab"
+                },
+                "onclick": {
+                    "enable": true,
+                    "mode": "push"
+                }
+            }
+        },
+        "retina_detect": true
+    });
+});

my_app/static/styles.css

@@ -0,0 +1,347 @@
+:root {
+    --background-color: rgb(46, 44, 46);
+    --navbar-color: rgb(52, 45, 53, 0.0);
+    --footer-background-color: var(--navbar-color);
+    --footer-text-color: rgb(145, 128, 128);
+    --title-color: #d6cdcd;
+    --button-bg-color: #505050;
+    --button-hover-bg-color: #404040;
+    --button-border-color: #404040;
+    --button-hover-border-color: #303030;
+    --input-bg-color: rgba(255, 255, 255, 0.5);
+    --input-text-color: #d6cdcd;
+    --alert-color: var(--input-text-color);
+    --toggle-color: #45586d;
+    --link-color: var(--title-color);
+    --link-hover-color: var(--title-color);
+    --modal-background-color: var(--background-color);
+    --modal-text-color: var(--title-color);
+}
+
+#particles-js {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--background-color);
+    background-image: url("");
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: 50% 50%;
+    z-index: -1;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    color: var(--title-color);
+    font-family: 'Georgia', serif;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: cover;
+}
+
+input[type="text"], input[type="email"], input[type="password"] {
+    background-color: rgba(10, 9, 9, 0.5);
+    border: 1px solid #100f0f;
+    color: white;
+    border-radius: 4px;
+    padding: 10px;
+}
+
+textarea {
+    background-color:transparent;  
+    background:  transparent;
+    resize: vertical;
+    overflow-y: auto;
+}
+
+.modal-content {
+    background-color: var(--modal-background-color);
+    color: var(--modal-background-color);
+    z-index: 1050; 
+}
+
+.modal-header .close {
+    color: var(--modal-text-color);
+}
+
+body, h1, h2, h3, p, a {
+    font-family: 'Georgia', serif;
+    text-align: center;
+}
+
+table {
+    margin-top: 20px;
+    color: var(--title-color);
+}
+
+thead {
+    color: var(--title-color);
+}
+
+tbody {
+    color: var(--title-color);
+}
+
+.footer {
+    background-color: var(--footer-background-color);
+    color: var(--footer-text-color);
+    padding: 10px;
+    text-align: center;
+    margin-top: 20px;
+    position: relative;
+    bottom: 0;
+    width: 100%;
+}
+
+.navbar {
+    margin-bottom: 20px;
+    background-color: var(--navbar-color);
+}
+
+a.nav-link {
+    color: var(--link-color);
+    text-decoration: none;
+}
+
+a.nav-link:hover {
+    color: var(--link-hover-color);
+}
+
+.center-text {
+    text-align: center;
+}
+
+.btn-center {
+    display: flex;
+    justify-content: center;
+}
+
+.footer a {
+    color: var(--link-color);
+    text-decoration: none;
+}
+
+.footer a:hover {
+    color: var(--link-hover-color);
+}
+
+textarea {
+    background-color: #1e0606 ;
+    border: 1px solid #ccc;
+    resize: vertical;
+    overflow-y: auto;
+}
+
+.btn-primary {
+    background-color: var(--button-bg-color);
+    border-color: var(--button-border-color);
+    margin-bottom: 20px;
+}
+
+.btn-primary:hover {
+    background-color: var(--button-hover-bg-color);
+    border-color: var(--button-hover-border-color);
+}
+
+h1, h2 {
+    color: var(--title-color);
+    padding-top: 20px;
+}
+
+.table td, .table th {
+    text-align: left;
+    vertical-align: middle;
+}
+
+.text-center {
+    margin-top: 20px;
+}
+
+.btn-danger {
+    width: 100px;
+}
+
+.btn-info {
+    width: 100px;
+    height: 50;
+}
+
+.form-text.text-muted {
+    color: var(--alert-color) !important;
+}
+
+.btn-toggle {
+    border: none;
+    background: none;
+    color: var(--toggle-color);
+    cursor: pointer;
+}
+
+.content-hidden {
+    display: none;
+}
+
+.container {
+    flex: 1;
+}
+
+.modal-content {
+    background-color: var(--modal-background-color);
+    color: var(--modal-text-color);
+}
+
+.modal-header .close {
+    color: var(--modal-text-color);
+}
+
+.flip-card {
+    background-color: transparent;
+    width: 100%;
+    height: 200px;
+    perspective: 1000px;
+}
+
+.flip-card-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    transition: transform 0.8s;
+    transform-style: preserve-3d;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+}
+
+.flip-card:hover .flip-card-inner {
+    transform: rotateY(180deg);
+}
+
+.flip-card-front,
+.flip-card-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+.flip-card-front {
+    background-color: #313840;
+    color: white;
+}
+
+.flip-card-back {
+    background-color: #8fa2b5;
+    color: black;
+    transform: rotateY(180deg);
+}
+
+
+.sidebar {
+    position: fixed;
+    top: 0;
+    left: -300px;
+    width: 300px;
+    height: 100%;
+    background-color: #343a40;
+    color: white;
+    transition: 0.3s;
+    z-index: 1000;
+}
+
+.sidebar.active {
+    left: 0;
+}
+
+.sidebar-content {
+    padding: 20px;
+}
+
+.flashcards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.flashcard {
+    background-color: white;
+    width: 900px;
+    height: 900px;
+    margin: 20px;
+    perspective: 1000px;
+}
+
+.flashcard-inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    transition: transform 0.8s;
+    transform-style: preserve-3d;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+}
+
+.flashcard:hover .flashcard-inner {
+    transform: rotateY(180deg);
+}
+
+.flashcard-front, .flashcard-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    border-radius: 10px;
+}
+
+.flashcard-front {
+    background-color: #091d2b;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 24px;
+}
+
+.flashcard-back {
+    background-color: rgb(207, 214, 234);
+    color: black;
+    transform: rotateY(180deg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    box-sizing: border-box;
+    text-align: justify;
+}
+
+.col-lg-7 {
+    background-color: rgba(68, 68, 68, 0.85); 
+    padding: 20px;
+    border-radius: 10px;
+    color: white;
+}
+
+.col-lg-7 h5 {
+    font-size: 1.2rem;
+    margin-top: 15px;
+    color: #f8f9fa;
+}
+
+.col-lg-7 p {
+    font-size: 1rem;
+    line-height: 1.6;
+}

my_app/templates/403.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Access Denied</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="container text-center">
+        <h1>Access Denied</h1>
+        <p>You do not have permission to access this page.</p>
+        <a href="{{ url_for('index') }}" class="btn btn-primary">Go Home</a>
+    </div>
+</body>
+</html>

my_app/templates/about_us.html

@@ -0,0 +1,65 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mt-4" style="background-color: rgba(0, 0, 0, 0.3); color: white; padding: 20px; border-radius: 10px;">
+    <h2>About Us</h2>
+    <p style="text-indent: 40px; text-align:left;">
+        Welcome to the project page for SimpleAES, a comprehensive system designed to evaluate English 
+        essays based on the IELTS rubrics. The primary goal of this project is to develop an automated tool that 
+        can accurately score essays on four critical criteria: Task Response, Coherence and Cohesion, 
+        Lexical Resource, and Grammatical Range and Accuracy. This project aims to provide a reliable 
+        and objective means of essay assessment, helping both learning and evaluation processes in educational 
+        settings.
+    </p>
+    <br>
+    <p style="text-indent: 40px; text-align:left;">
+        The IELTS (International English Language Testing System) is a widely recognized standard for 
+        assessing English language proficiency. It is used by educational institutions, employers, 
+        and immigration authorities worldwide. To meet the specified standards set by IELTS, this project 
+        leverages advanced natural language processing (NLP) techniques and neural network to evaluate essays 
+        with a high degree of precision and consistency.
+    </p>
+    <br>
+    <p style="text-indent: 40px; text-align:left;">
+        The project focuses on the following four criteria:
+    </p>
+    <ul>
+        <li style="text-indent: 40px; text-align:left;">
+            <strong>Task Response:</strong> This criterion evaluates how well the essay addresses the prompt. 
+            It checks if the writer has answered all parts of the question, developed a clear position, 
+            and supported their arguments with relevant examples. An effective task response ensures that the 
+            essay stays on topic and thoroughly covers all aspects of the task.
+        </li>
+        <br>
+        <li style="text-indent: 40px; text-align:left;">
+            <strong>Coherence and Cohesion:</strong> This criterion assesses the logical flow and organization 
+            of the essay. It examines how ideas are connected and how effectively the essay uses cohesive 
+            devices (such as conjunctions and transitions) to link sentences and paragraphs. Good coherence 
+            and cohesion make an essay easy to follow and understand.
+        </li>
+        <br>
+        <li style="text-indent: 40px; text-align:left;">
+            <strong>Lexical Resource:</strong> This criterion evaluates the range and accuracy of vocabulary 
+            used in the essay. It looks at the writer’s ability to use a wide variety of words and phrases 
+            accurately and appropriately. This includes the use of idiomatic expressions, collocations, and less 
+            common lexical items that enhance the essay's overall quality.
+        </li>
+        <br>
+        <li style="text-indent: 40px; text-align:left;">
+            <strong>Grammatical Range and Accuracy:</strong> This criterion assesses the writer's command of 
+            grammatical structures. It evaluates the variety and correctness of sentence structures, verb tenses, 
+            punctuation, and syntax. An essay that demonstrates a high level of grammatical proficiency is easier to 
+            read and more effective in communicating its message.
+        </li>
+    </ul>
+    <br>
+    <p style="text-indent: 40px; text-align:left;">
+        By implementing this automated essay scoring system, the project aims to provide students 
+        and educators with a powerful tool for improving writing skills and ensuring fair and consistent 
+        evaluation. The system can be used for practice, feedback, and formal assessment, helping learners to 
+        identify areas for improvement and track their progress over time. Ultimately, the project seeks to 
+        enhance the teaching and learning of English writing by leveraging technology to provide high-quality,
+        accessible, and efficient essay evaluations.
+    </p>
+</div>
+{% endblock %}

my_app/templates/base.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>{% block title %}{% endblock %}</title>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script src="{{ url_for('static', filename='js/particles_init.js') }}"></script>
+    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> -->
+    <script>
+        window.addEventListener('beforeunload', function() {
+            if (typeof sessionStorage !== 'undefined') {
+                sessionStorage.clear();
+            }
+        });
+    </script>
+</head>
+<body>
+    <div id="particles-js"></div>
+    <div class="overlay-content">
+        <nav class="navbar navbar-expand-lg">
+            <div class="container-fluid">
+                <a class="nav-link" href="{{ url_for('about.about_us') }}">About Us</a>
+                <a class="nav-link" href="{{ url_for('infer.rubric_explanation') }}">Rubric Explanation</a>
+                <a class="nav-link" href="{{ url_for('infer.index') }}">Home</a>
+                {% if current_user.is_authenticated %}
+                    <a class="nav-link" href="{{ url_for('dashboard.dashboard') }}">Dashboard [ {{ current_user.nickname }} ]</a>
+                    <a class="nav-link" href="{{ url_for('auth.logout') }}">Logout</a>
+                {% else %}
+                    <span class="navbar-text">
+                        No user is logged in.
+                    </span>
+                    <a class="nav-link" href="{{ url_for('auth.login') }}">Login</a>
+                    <a class="nav-link" href="{{ url_for('auth.register') }}">Register</a>
+                {% endif %}
+            </div>
+        </nav>
+        
+        <div class="container">
+            {% block content %}
+            {% endblock %}
+        </div>
+    
+        <div class="footer">
+            <p>Visit our <a href="https://github.com/mengsifei/SimpleAES">GitHub</a></p>
+        </div>
+    
+        <!-- Modals -->
+        <div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="exampleModalLabel">Alert</h5>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                            <span aria-hidden="true">&times;</span>
+                        </button>
+                    </div>
+                    <div class="modal-body">
+                        Please provide both a topic and an essay text.
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    
+        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.0/dist/umd/popper.min.js"></script>
+        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+        {% block extra_scripts %}{% endblock %}
+    </div>
+</body>
+</html>

my_app/templates/coherence_cohesion.html

@@ -0,0 +1,106 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mt-4">
+    <h2>Coherence & Cohesion</h2>
+    <div class="flashcards">
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 9
+                </div>
+                <div class="flashcard-back">
+                    The message can be followed effortlessly. Cohesion is used in such a way that it very rarely attracts attention. Any lapses in coherence or cohesion are minimal. Paragraphing is skilfully managed.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 8
+                </div>
+                <div class="flashcard-back">
+                    The message can be followed with ease. Information and ideas are logically sequenced, and cohesion is well managed. Occasional lapses in coherence and cohesion may occur. Paragraphing is used sufficiently and appropriately.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 7
+                </div>
+                <div class="flashcard-back">
+                    Information and ideas are logically organised, and there is a clear progression throughout the response. 
+                    A range of cohesive devices including reference and substitution is used flexibly but with some inaccuracies or some over/under use. 
+                    Paragraphing is generally used effectively to support overall coherence, and the sequencing of ideas within a paragraph is generally logical.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 6
+                </div>
+                <div class="flashcard-back">
+                    Information and ideas are generally arranged coherently and there is a clear overall progression. Cohesive devices are used to some good effect but cohesion within and/or between sentences may be faulty or mechanical due to misuse, overuse or omission. The use of reference and substitution may lack flexibility or clarity and result in some repetition or error. Paragraphing may not always be logical and/or the central topic may not always be clear.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 5
+                </div>
+                <div class="flashcard-back">
+                    Organisation is evident but is not wholly logical and there may be a lack of overall progression. Nevertheless, there is a sense of underlying coherence to the response. The relationship of ideas can be followed but the sentences are not fluently linked to each other. There may be limited/overuse of cohesive devices with some inaccuracy. The writing may be repetitive due to inadequate and/or inaccurate use of reference and substitution. Paragraphing may be inadequate or missing.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 4
+                </div>
+                <div class="flashcard-back">
+                    Information and ideas are evident but not arranged coherently and there is no clear progression within the response. Relationships between ideas can be unclear and/or inadequately marked. There is some use of basic cohesive devices, which may be inaccurate or repetitive. There is inaccurate use or a lack of substitution or referencing. There may be no paragraphing and/or no clear main topic within paragraphs.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 3
+                </div>
+                <div class="flashcard-back">
+                    There is no apparent logical organisation. Ideas are discernible but difficult to relate to each other. There is minimal use of sequencers or cohesive devices. Those used do not necessarily indicate a logical relationship between ideas. There is difficulty in identifying referencing. Any attempts at paragraphing are unhelpful.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 2
+                </div>
+                <div class="flashcard-back">
+                    There is little evidence of control of organisational features.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 1
+                </div>
+                <div class="flashcard-back">
+                    Responses of 20 words or fewer are rated at Band 1. There is no apparent control of organisational features.
+                </div>
+            </div>
+        </div>
+    </div>
+    <a href="{{ url_for('infer.rubric_explanation') }}" class="btn btn-primary">Go Back to Rubric Explanation Page</a>
+</div>
+{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/flashcards.css') }}">
+{% endblock %}

my_app/templates/dashboard.html

@@ -0,0 +1,111 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mt-4">
+    <h2 class="center-text">Dashboard</h2>
+    <form method="POST" action="{{ url_for('dashboard.delete_histories') }}">
+        <div class="row mt-4">
+            <div class="col-lg-6 mb-4">
+                <h4>Rubric Score Dynamics</h4>
+                <canvas id="RubricChart"></canvas>
+            </div>
+            <div class="col-lg-6 mb-4">
+                <h4>Number of Essays Checked per Day</h4>
+                <canvas id="EssayCountChart"></canvas>
+            </div>
+        </div>
+        <table class="table">
+            <thead>
+                <tr>
+                    <th scope="col">#</th>
+                    <th scope="col"><input id="select-all" type="checkbox" onclick="selectAll(this)"></th>
+                    <th scope="col">Time</th>
+                    <th scope="col">Topic</th>
+                    <th scope="col">Essay</th>
+                    <th scope="col">Task Response</th>
+                    <th scope="col">Coherence and Cohesion</th>
+                    <th scope="col">Lexical Resource</th>
+                    <th scope="col">Grammatical Range and Accuracy</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for history in histories %}
+                    <tr>
+                        <td>{{ loop.index }}</td> 
+                        <td><input type="checkbox" name="history_ids" value="{{ history.id }}"></td>
+                        <td>{{ history.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
+                        <td onclick="showModal('{{ history.topic }}')">{{ history.topic | truncate(10) }}</td>
+                        <td onclick="showModal('{{ history.essay }}')">{{ history.essay | truncate(100) }}</td>
+                        <td>{{ history.score_tr | int }}</td>
+                        <td>{{ history.score_cc | int }}</td>
+                        <td>{{ history.score_lr | int }}</td>
+                        <td>{{ history.score_gra | int }}</td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+        <div class="text-center">
+            <button type="submit" class="btn btn-danger">Delete Selected</button>
+        </div>
+    </form>
+<nav aria-label="Page navigation example" style="margin-top: 50px;">
+    <ul class="pagination justify-content-center">
+      {% if pagination.has_prev %}
+      <li class="page-item">
+          <a class="page-link" href="{{ url_for('dashboard.dashboard', page=pagination.prev_num) }}">Previous</a>
+      </li>
+      {% else %}
+      <li class="page-item disabled"><span class="page-link">Previous</span></li>
+      {% endif %}
+  
+      {% for page in pagination.iter_pages(left_edge=2, left_current=1, right_current=2, right_edge=2) %}
+      <li class="page-item {{ 'active' if page == pagination.page else '' }}">
+          {% if page %}
+          <a class="page-link" href="{{ url_for('dashboard.dashboard', page=page) }}">{{ page }}</a>
+          {% else %}
+          <span class="page-link">...</span>
+          {% endif %}
+      </li>
+      {% endfor %}
+  
+      {% if pagination.has_next %}
+      <li class="page-item">
+          <a class="page-link" href="{{ url_for('dashboard.dashboard', page=pagination.next_num) }}">Next</a>
+      </li>
+      {% else %}
+      <li class="page-item disabled"><span class="page-link">Next</span></li>
+      {% endif %}
+    </ul>
+  </nav>
+</div>
+<div class="modal fade" id="contentModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Full Content</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body" style="max-height:400px; overflow-y:auto;">
+                <p id="content-text"></p>
+            </div>
+        </div>
+    </div>
+</div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const scoresTR = JSON.parse('{{ scores_tr|tojson|safe }}');
+        const scoresCC = JSON.parse('{{ scores_cc|tojson|safe }}');
+        const scoresLR = JSON.parse('{{ scores_lr|tojson|safe }}');
+        const scoresGRA = JSON.parse('{{ scores_gra|tojson|safe }}');
+        const creationTimes = JSON.parse('{{ creation_times|tojson|safe }}');
+        initializeCharts(scoresTR, scoresCC, scoresLR, scoresGRA, creationTimes);
+    });
+</script>
+<script src="{{ url_for('static', filename='js/dashboard_charts.js') }}"></script>
+
+{% endblock %}

my_app/templates/error.html

@@ -0,0 +1,13 @@
+{% extends 'base.html' %}
+
+{% block title %}Error{% endblock %}
+
+{% block content %}
+<div class="container mt-4">
+    <h2>Error</h2>
+    <div class="alert alert-danger" role="alert">
+        {{ error_message }}
+    </div>
+    <a href="{{ url_for('infer.index') }}" class="btn btn-primary">Go Back to Home</a>
+</div>
+{% endblock %}

my_app/templates/grammatical_range_accuracy.html

@@ -0,0 +1,104 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mt-4">
+    <h2>Grammatical Range & Accuracy</h2>
+    <div class="flashcards">
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 9
+                </div>
+                <div class="flashcard-back">
+                    A wide range of structures is used with full flexibility and control. Punctuation and grammar are used appropriately throughout. Minor errors are extremely rare and have minimal impact on communication.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 8
+                </div>
+                <div class="flashcard-back">
+                    A wide range of structures is flexibly and accurately used. The majority of sentences are error-free, and punctuation is well managed. Occasional, non-systematic errors and inappropriacies occur, but have minimal impact on communication.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 7
+                </div>
+                <div class="flashcard-back">
+                    A variety of complex structures is used with some flexibility and accuracy. Grammar and punctuation are generally well controlled, and error-free sentences are frequent. A few errors in grammar may persist, but these do not impede communication.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 6
+                </div>
+                <div class="flashcard-back">
+                    A mix of simple and complex sentence forms is used but flexibility is limited. Examples of more complex structures are not marked by the same level of accuracy as in simple structures. Errors in grammar and punctuation occur, but rarely impede communication.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 5
+                </div>
+                <div class="flashcard-back">
+                    The range of structures is limited and rather repetitive. Although complex sentences are attempted, they tend to be faulty, and the greatest accuracy is achieved on simple sentences. Grammatical errors may be frequent and cause some difficulty for the reader. Punctuation may be faulty.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 4
+                </div>
+                <div class="flashcard-back">
+                    A very limited range of structures is used. Subordinate clauses are rare and simple sentences predominate. Some structures are produced accurately but grammatical errors are frequent and may impede meaning. Punctuation is often faulty or inadequate.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 3
+                </div>
+                <div class="flashcard-back">
+                    Sentence forms are attempted, but errors in grammar and punctuation predominate (except in memorised phrases or those taken from the input material). This prevents most meaning from coming through.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 2
+                </div>
+                <div class="flashcard-back">
+                    There is little or no evidence of sentence forms (except in memorised phrases).
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 1
+                </div>
+                <div class="flashcard-back">
+                    Responses of 20 words or fewer are rated at Band 1. No rateable language is evident.
+                </div>
+            </div>
+        </div>
+    </div>
+    <a href="{{ url_for('infer.rubric_explanation') }}" class="btn btn-primary">Go Back to Rubric Explanation Page</a>
+</div>
+{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/flashcards.css') }}">
+{% endblock %}

my_app/templates/index.html

@@ -0,0 +1,67 @@
+{% extends 'base.html' %}
+
+{% block title %}Home Page{% endblock %}
+
+{% block content %}
+<div class="container mt-4">
+    <!-- Sidebar with Toggle Button Inside -->
+    <div id="sidebar" class="sidebar">
+        <!-- Sidebar Toggle Button -->
+        <button class="btn btn-primary" id="toggle-sidebar" style="position: absolute; top: 350px; right: -45px; z-index: 999;">☰</button>
+
+        <!-- Sidebar Content -->
+        <div class="sidebar-content">
+            <h3 id="countdown-timer" contenteditable="true">5:00</h3> <!-- Starting value -->
+            <button class="btn btn-info mt-2 mr-2" id="start-countdown">Start</button>
+            <button class="btn btn-danger mt-2" id="stop-countdown">Stop</button>
+            <div class="mt-4">
+                <label for="draft-text">Draft Text:</label>
+                <textarea id="draft-text" class="form-control" rows="8" placeholder="Type your draft here..."></textarea>
+            </div>
+        </div>
+    </div>
+
+    <!-- Main Content: Essay Topic and Essay Content -->
+    <div style="margin-left: 30px;"> <!-- Adjust based on sidebar width -->
+        <h1 class="center-text">Enter Topic and Essay for Prediction</h1>
+        <form method="post" class="mt-4" id="essayForm">
+            <div class="mb-3">
+                <label for="topic" class="form-label">Essay Topic:</label>
+                <input type="text" id="topic" name="topic" class="form-control" autocomplete="off">
+            </div>
+            <div class="mb-3">
+                <label for="essay" class="form-label">Essay Content:</label>
+                <textarea style="background-color:rgba(10, 9, 9, 0.5); color:rgb(255, 255, 255); border: 1px solid #100f0f;" id="essay" name="essay" class="form-control" rows="8" autocomplete="off"></textarea>
+            </div>
+            <div class="btn-center">
+                <button type="submit" class="btn btn-primary">Submit</button>
+            </div>
+            <input type="hidden" id="isempty" value="{{ isempty }}">
+        </form>
+    </div>
+
+    <!-- Alert Modal -->
+    <div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="alertModalLabel">Alert</h5>
+                    <button type="button" class="close" data-dismiss="modal">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    Please provide both a topic and an essay text.
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', filename='js/home_page.js') }}"></script>
+{% endblock %}

my_app/templates/infer.html

@@ -0,0 +1,181 @@
+{% extends 'base.html' %}
+
+{% block title %}Prediction Results{% endblock %}
+
+{% block content %}
+<div class="container mt-4">
+    <!-- Topic Card (same width as comparison) -->
+    <div class="row">
+        <div class="col-12 mb-4">
+            <div class="card border-primary">
+                <div class="card-header bg-secondary text-white">
+                    <h4 class="mb-0">Topic</h4>
+                </div>
+                <div class="card-body">
+                    <p class="card-text" style="color: black;">{{ topic }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Essay Comparison -->
+    <div class="row">
+        <div class="col-12 mb-4">
+            <div class="card border-primary">
+                <div class="card-header bg-secondary text-white">
+                    <h4 class="mb-0">Essay Comparison</h4>
+                </div>
+                <div class="card-body p-0">
+                    <div class="row g-0">
+                        <!-- Original Essay -->
+                        <div class="col-md-6 border-end">
+                            <div class="p-3">
+                                <h5 class="text-center text-primary">Original Essay</h5>
+                                <div class="original-essay" id="originalEssay" style="color: black; height: 400px; overflow-y: auto;">
+                                    {{ essay|safe }}
+                                </div>
+                            </div>
+                        </div>
+                        
+                        <!-- Corrected Essay -->
+                        <div class="col-md-6">
+                            <div class="p-3">
+                                <h5 class="text-center text-success">Corrected Essay</h5>
+                                <div class="corrected-essay" id="correctedEssay" style="color: black; height: 400px; overflow-y: auto;">
+                                    {{ corrected_essay|safe }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Rubric Cards (now below comparison) -->
+    <div class="row">
+        {% set rubrics = [
+            ('Task Response', result[0], tr , 'task_response'),
+            ('Coherence and Cohesion', result[1], cc, 'coherence_cohesion'),
+            ('Lexical Resource', result[2], lr, 'lexical_resource'),
+            ('Grammatical Range and Accuracy', result[3], gra, 'grammatical_accuracy')
+        ] %}
+    
+        {% for rubric, score, explanation, link in rubrics %}
+        <div class="col-md-3 mb-4">  <!-- Changed to col-md-3 for 4 cards in a row -->
+            <div class="card h-100 bg-light border-info">  <!-- Changed to light bg with info border -->
+                <div class="card-body">
+                    <h5 class="card-title" style="color: black;">{{ rubric }}</h5>
+                    <div class="score-display mb-3 text-center">  <!-- Centered score -->
+                        <span class="score">{{ score|round|int }}</span>/9
+                    </div>
+                    <p class="card-text text-truncate-multiline text-dark">  <!-- Dark text for better readability -->
+                        {{ explanation }}
+                    </p>
+                    <div class="d-flex justify-content-between mt-3">
+                        <button type="button" class="btn btn-sm btn-outline-info" data-bs-toggle="modal" data-bs-target="#feedbackModal{{ loop.index }}">
+                            View Feedback
+                        </button>
+                        <a href="{{ url_for('infer.rubric_explanation', rubric=link) }}" class="btn btn-sm btn-outline-info">
+                            Details
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Modal for each feedback item -->
+            <div class="modal fade" id="feedbackModal{{ loop.index }}" tabindex="-1" aria-labelledby="feedbackModalLabel{{ loop.index }}" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered">
+                    <div class="modal-content">
+                        <div class="modal-header bg-info text-white">
+                            <h5 class="modal-title" id="feedbackModalLabel{{ loop.index }}">{{ rubric }} Feedback</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body" style="max-height: 60vh; overflow-y: auto;">
+                            {{ explanation }}
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-info" data-bs-dismiss="modal">Close</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+
+    <div class="text-center mt-4">
+        <a href="{{ url_for('infer.index') }}" class="btn btn-primary">Submit Another Essay</a>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jsdiff/5.0.1/diff.min.js"></script>
+  <script>
+  document.addEventListener('DOMContentLoaded', function() {
+    try {
+      const origEl = document.getElementById('originalEssay');
+      const corrEl = document.getElementById('correctedEssay');
+      if (!origEl || !corrEl) return;
+
+      const originalText  = origEl.textContent;
+      const correctedText = corrEl.textContent;
+
+      // 2) do the diff
+      const diff = JsDiff.diffWordsWithSpace(originalText, correctedText);
+
+      // if nothing really changed, bail out
+      if (diff.length <= 1) return;
+
+      // 3) clear out the old
+      corrEl.innerHTML = '';
+
+      // 4) re‐render with spans
+      diff.forEach(part => {
+        const span = document.createElement('span');
+        span.textContent = part.value;
+        if (part.added)   span.classList.add('diff-ins');
+        if (part.removed) span.classList.add('diff-del');
+        corrEl.appendChild(span);
+      });
+    }
+    catch (e) {
+      console.error('Diff rendering error:', e);
+    }
+  });
+  </script>
+<style>
+  .diff-ins {border-bottom:2px solid #28a745; }
+  .diff-del {text-decoration: line-through; color: #dc3545; }
+
+    /* Custom styles */
+    .score-display {
+        font-size: 1.2rem;
+        font-weight: bold;
+    }
+    
+    .score {
+        color: #0d6efd;  /* Changed to Bootstrap primary blue */
+        font-size: 1.5rem;
+    }
+    
+    .text-truncate-multiline {
+        display: -webkit-box;
+        -webkit-line-clamp: 3;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        min-height: 4.5em;
+    }
+    
+    .card {
+        transition: transform 0.2s;
+    }
+    
+    .card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 4px 15px rgba(13, 110, 253, 0.25);  /* Primary blue shadow */
+    }
+</style>
+{% endblock %}

my_app/templates/lexical_resource.html

@@ -0,0 +1,104 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mt-4">
+    <h2>Lexical Resource</h2>
+    <div class="flashcards">
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 9
+                </div>
+                <div class="flashcard-back">
+                    Full flexibility and precise use are widely evident. A wide range of vocabulary is used accurately and appropriately with very natural and sophisticated control of lexical features. Minor errors in spelling and word formation are extremely rare and have minimal impact on communication.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 8
+                </div>
+                <div class="flashcard-back">
+                    A wide resource is fluently and flexibly used to convey precise meanings. There is skilful use of uncommon and/or idiomatic items when appropriate, despite occasional inaccuracies in word choice and collocation. Occasional errors in spelling and/or word formation may occur, but have minimal impact on communication.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 7
+                </div>
+                <div class="flashcard-back">
+                    The resource is sufficient to allow some flexibility and precision. There is some ability to use less common and/or idiomatic items. An awareness of style and collocation is evident, though inappropriacies occur. There are only a few errors in spelling and/or word formation and they do not detract from overall clarity.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 6
+                </div>
+                <div class="flashcard-back">
+                    The resource is generally adequate and appropriate for the task. The meaning is generally clear in spite of a rather restricted range or a lack of precision in word choice. If the writer is a risk-taker, there will be a wider range of vocabulary used but higher degrees of inaccuracy or inappropriacy. There are some errors in spelling and/or word formation, but these do not impede communication.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 5
+                </div>
+                <div class="flashcard-back">
+                    The resource is limited but minimally adequate for the task. Simple vocabulary may be used accurately but the range does not permit much variation in expression. There may be frequent lapses in the appropriacy of word choice and a lack of flexibility is apparent in frequent simplifications and/or repetitions. Errors in spelling and/or word formation may be noticeable and may cause some difficulty for the reader.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 4
+                </div>
+                <div class="flashcard-back">
+                    The resource is limited and inadequate for or unrelated to the task. Vocabulary is basic and may be used repetitively. There may be inappropriate use of lexical chunks (e.g. memorised phrases, formulaic language and/or language from the input material). Inappropriate word choice and/or errors in word formation and/or in spelling may impede meaning.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 3
+                </div>
+                <div class="flashcard-back">
+                    The resource is inadequate (which may be due to the response being significantly underlength). Possible over-dependence on input material or memorised language. Control of word choice and/or spelling is very limited, and errors predominate. These errors may severely impede meaning.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 2
+                </div>
+                <div class="flashcard-back">
+                    The resource is extremely limited with few recognisable strings, apart from memorised phrases. There is no apparent control of word formation and/or spelling.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 1
+                </div>
+                <div class="flashcard-back">
+                    Responses of 20 words or fewer are rated at Band 1. No resource is apparent, except for a few isolated words.
+                </div>
+            </div>
+        </div>
+    </div>
+    <a href="{{ url_for('infer.rubric_explanation') }}" class="btn btn-primary">Go Back to Rubric Explanation Page</a>
+</div>
+{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/flashcards.css') }}">
+{% endblock %}

my_app/templates/login.html

@@ -0,0 +1,49 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container">
+    <h2 class="center-text">Login</h2>
+    <form method="POST">
+        <div class="mb-3">
+            <label for="email" class="form-label">Email:</label>
+            <input type="email" class="form-control" id="email" autocomplete="off" name="email" required>
+        </div>
+        <div class="mb-3">
+            <label for="password" class="form-label">Password:</label>
+            <input type="password" class="form-control" id="password" autocomplete="off" name="password" required>
+        </div>
+        <input type="hidden" id="message" value="{{ message }}">
+        <div class="btn-center">
+            <button type="submit" class="btn btn-primary">Login</button>
+        </div>
+    </form>
+    <!-- Modal HTML -->
+    <div class="modal fade" id="loginAlertModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="loginModalLabel">Login Alert</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <!-- Message will be inserted here via JavaScript -->
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script>
+    $(document).ready(function() {
+        var message = $('#message').val();
+        if (message) {
+            $('#loginAlertModal .modal-body').text(message);
+            $('#loginAlertModal').modal('show');
+        } 
+    });
+</script>
+{% endblock %}

my_app/templates/register.html

@@ -0,0 +1,77 @@
+{% extends 'base.html' %}
+
+{% block title %}Register{% endblock %}
+
+{% block content %}
+<div class="container">
+    <h2 class="center-text">Register</h2>
+    <form method="POST" id="registrationForm">
+        <div class="mb-3">
+            <label for="email" class="form-label">Email:</label>
+            <input type="email" class="form-control" id="email" autocomplete="off" name="email" required>
+            <small id="emailHelp" class="form-text text-muted">Your email here. Example: example@domain.com</small>
+        </div>
+        <div class="mb-3">
+            <label for="nickname" class="form-label">Nickname:</label>
+            <input type="text" class="form-control" id="nickname" autocomplete="off" name="nickname" required>
+            <small id="nicknameHelp" class="form-text text-muted">Your nickname here. Example: Nickname1</small>
+        </div>
+        <div class="mb-3">
+            <label for="password" class="form-label">Password:</label>
+            <input type="password" class="form-control" id="password" autocomplete="off" name="password" required>
+            <small id="passwordHelp" class="form-text text-muted">Your password should be more than 8 symbols.</small>
+        </div>
+        <div class="mb-3">
+            <label for="repeatPassword" class="form-label">Repeat Password:</label>
+            <input type="password" class="form-control" id="repeatPassword" autocomplete="off" name="repeatPassword" required>
+        </div>
+        <input type="hidden" id="message" value="{{ message }}">
+        <div class="btn-center">
+            <button type="submit" class="btn btn-primary">Register</button>
+        </div>
+    </form>
+
+    <!-- Registration Alert Modal -->
+    <div class="modal fade" id="registrationAlertModal" tabindex="-1" role="dialog" aria-labelledby="registrationModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="registrationModalLabel">Registration Alert</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <!-- Message will be inserted here via JavaScript -->
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+{% block extra_scripts %}
+<script>
+    $(document).ready(function() {
+        // Show message if provided
+        var message = $('#message').val();
+        if (message) {
+            $('#registrationAlertModal .modal-body').text(message);
+            $('#registrationAlertModal').modal('show');
+        }
+
+        // Validate passwords before submission
+        $('#registrationForm').on('submit', function(e) {
+            var password = $('#password').val();
+            var repeatPassword = $('#repeatPassword').val();
+            if (password !== repeatPassword) {
+                e.preventDefault(); // Prevent form submission
+                $('#registrationAlertModal .modal-body').text('Passwords do not match!');
+                $('#registrationAlertModal').modal('show');
+            }
+        });
+    });
+</script>
+{% endblock %}

my_app/templates/rubric_explanation.html

@@ -0,0 +1,28 @@
+{% extends 'base.html' %}
+
+{% block title %}Rubric Explanation{% endblock %}
+
+{% block content %}
+<div class="container mt-4">
+    <h2 class="center-text">Explanation</h2>
+    <div class="row text-center mb-2">
+        <div class="col-md-7">
+            <a href="{{ url_for('infer.task_response') }}" class="btn btn-primary mt-3">Task Response Explanation</a>
+        </div>
+        <div class="col-md-5">
+            <a href="{{ url_for('infer.coherence_cohesion') }}" class="btn btn-primary mt-3">Coherence and Cohesion Explanation</a>
+        </div>
+    </div>
+    <div class="row text-center mb-2">
+        <div class="col-md-7">
+            <a href="{{ url_for('infer.lexical_resource') }}" class="btn btn-primary mt-3">Lexical Resource Explanation</a>
+        </div>
+        <div class="col-md-5">
+            <a href="{{ url_for('infer.grammatical_range_accuracy') }}" class="btn btn-primary mt-3">Grammatical Range and Accuracy Explanation</a>
+        </div>
+    </div>
+    <div class="btn-center">
+        <a href="{{ url_for('infer.index') }}" class="btn btn-primary mt-3">Back</a>
+    </div>
+</div>
+{% endblock %}

my_app/templates/task_response.html

@@ -0,0 +1,104 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mt-4">
+    <h2>Task Response</h2>
+    <div class="flashcards">
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 9
+                </div>
+                <div class="flashcard-back">
+                    The prompt is appropriately addressed and explored in depth. A clear and fully developed position is presented which directly answers the question/s. Ideas are relevant, fully extended and well supported. Any lapses in content or support are extremely rare.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 8
+                </div>
+                <div class="flashcard-back">
+                    The prompt is appropriately and sufficiently addressed. A clear and well-developed position is presented in response to the question/s. Ideas are relevant, well extended and supported. There may be occasional omissions or lapses in content.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 7
+                </div>
+                <div class="flashcard-back">
+                    The main parts of the prompt are appropriately addressed. A clear and developed position is presented. Main ideas are extended and supported but there may be a tendency to over-generalise or there may be a lack of focus and precision in supporting ideas/material.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 6
+                </div>
+                <div class="flashcard-back">
+                    The main parts of the prompt are addressed (though some may be more fully covered than others). An appropriate format is used. A position is presented that is directly relevant to the prompt, although the conclusions drawn may be unclear, unjustified or repetitive.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 5
+                </div>
+                <div class="flashcard-back">
+                    The main parts of the prompt are incompletely addressed. The format may be inappropriate in places. The writer expresses a position, but the development is not always clear. Some main ideas are put forward, but they are limited and are not sufficiently developed and/or there may be irrelevant detail.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 4
+                </div>
+                <div class="flashcard-back">
+                    The prompt is tackled in a minimal way, or the answer is tangential, possibly due to some misunderstanding of the prompt. The format may be inappropriate. A position is discernible, but the reader has to read carefully to find it. Main ideas are difficult to identify and such ideas that are identifiable may lack relevance, clarity and/or support.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 3
+                </div>
+                <div class="flashcard-back">
+                    No part of the prompt is adequately addressed, or the prompt has been misunderstood. No relevant position can be identified, and/or there is little direct response to the question/s. There are few ideas, and these may be irrelevant or insufficiently developed.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 2
+                </div>
+                <div class="flashcard-back">
+                    The content is barely related to the prompt. No position can be identified. There may be glimpses of one or two ideas without development. There is little relevant message, or the entire response may be off-topic.
+                </div>
+            </div>
+        </div>
+        <div class="flashcard">
+            <div class="flashcard-inner">
+                <div class="flashcard-front">
+                    Band 1
+                </div>
+                <div class="flashcard-back">
+                    Responses of 20 words or fewer are rated at Band 1. The content is wholly unrelated to the prompt. Any copied rubric must be discounted.
+                </div>
+            </div>
+        </div>
+    </div>
+    <a href="{{ url_for('infer.rubric_explanation') }}" class="btn btn-primary">Go Back to Rubric Explanation Page</a>
+</div>
+{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/flashcards.css') }}">
+{% endblock %}

my_app/views/__init__.py

@@ -0,0 +1,9 @@
+from flask import Blueprint
+
+auth_bp = Blueprint('auth', __name__, template_folder='templates')
+dashboard_bp = Blueprint('dashboard', __name__, template_folder='templates')
+infer_bp = Blueprint('infer', __name__, template_folder='templates')
+about_bp = Blueprint('about', __name__, template_folder='templates')
+error_bp = Blueprint('error', __name__, template_folder='templates')
+
+from . import auth, dashboard, infer, about, error