Spaces:

carrotcake3
/

Biofuel-Optimiser

Sleeping

App Files Files Community

carrotcake3 commited on Dec 9, 2025

Commit

2d60d7c

verified ·

1 Parent(s): 8c2faa7

Upload 12 files

Browse files

Files changed (12) hide show

static/css/style.css +154 -0
static/img/background.webp +0 -0
static/js/main.js +10 -0
templates/about.html +16 -0
templates/base.html +96 -0
templates/constraints.html +23 -0
templates/dashboard.html +78 -0
templates/dataset.html +29 -0
templates/generative.html +28 -0
templates/login.html +0 -0
templates/mixture_predictor.html +11 -0
templates/pure_predictor.html +163 -0

static/css/style.css ADDED Viewed

	@@ -0,0 +1,154 @@

+/* body background image */
+body {
+    background: url("../img/background.webp") no-repeat center center fixed;
+    background-size: cover;
+}
+/* glass sidebar styles */
+.glass-sidebar {
+    min-width: 200px;
+    max-width: 200px;
+    min-height: 100vh;
+    /* Glass blur effect */
+    background: rgba(72, 95, 74, 0.45);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    /* Rounded edges */
+    border-radius: 20px;
+    margin: 15px;
+    /* Edge shadow*/
+    box-shadow:
+        inset 0 0 25px rgba(255, 255, 255, 0.04),
+        0 12px 32px rgba(0, 0, 0, 0.25);
+}
+/* sidebar items */
+.list-group {
+    background: transparent ;
+    border: none ;
+}
+.list-group-item {
+    background: transparent ;
+    border: none ;
+    color: #010202;
+    padding: 12px 22px;
+    font-size: 0.95rem;
+    transition: all 0.25s ease;
+    border-radius: 10px;
+    font-weight: 500;
+}
+.sidebar-link i {
+    color: #53062a;
+}
+/* Hover */
+.sidebar-link:hover {
+    background: rgba(255, 255, 255, 0.15) ;
+    color: white ;
+    font-weight: 600;
+}
+.sidebar-link:hover i {
+    color: white;
+    font-weight: 600;
+}
+/* Active Highlight Pill */
+.sidebar-link.active {
+    background: linear-gradient(135deg, #445750, #324e44) ;
+    color: white ;
+    font-weight: 600;
+    border-radius: 12px;
+}
+.sidebar-link.active i {
+    color: white ;
+    font-weight: 600;
+}
+/* Sidebar collapsed state */
+.glass-sidebar.collapsed {
+    margin-left: -220px;  /* hides it */
+    opacity: 0;
+    transition: all 0.35s ease;
+}
+/* Animate opening */
+.glass-sidebar {
+    transition: all 0.35s ease;
+}
+/* navbar styles */
+.navbar {
+    background: #113529 ;
+}
+.navbar .btn {
+    border-color: white;
+    color: white;
+}
+.navbar .btn:hover {
+    background-color: rgba(255, 255, 255, 0.15);
+}
+.navbar-title-center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: white;
+    font-size: 1.25rem;
+    font-weight: 600;
+}
+/* cards */
+.card-metric {
+    border: none;
+    border-radius: 16px;
+    background: linear-gradient(
+        135deg,
+        #a5b474 0%,
+        #7cc29a 100%
+    );
+    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
+    padding: 1.5rem;
+}
+/* buttons */
+.btn-primary {
+    background-color: #595951;
+    border-color: #302f2c;
+}
+.btn-primary:hover {
+    background-color: #ffffff;
+    color: #000000;
+}
+.btn-secondary {
+    background-color: #595951;
+    border-color: #302f2c;
+}
+.btn-secondary:hover {
+    background-color: #ffffff;
+    color: #000000;
+}
+/* table */
+.table-striped tbody tr:nth-of-type(odd) {
+    background-color: #ecfdf5;
+}

static/img/background.webp ADDED Viewed

static/js/main.js ADDED Viewed

	@@ -0,0 +1,10 @@

+document.addEventListener("DOMContentLoaded", function () {
+    const wrapper = document.getElementById("wrapper");
+    const sidebar = document.getElementById("sidebar-wrapper");
+    const toggleBtn = document.getElementById("sidebarToggle");
+    toggleBtn.addEventListener("click", function () {
+        // toggle hidden state
+        sidebar.classList.toggle("collapsed");
+    });
+});

templates/about.html ADDED Viewed

	@@ -0,0 +1,16 @@

+{% extends "base.html" %}
+{% block content %}
+<div class="container py-4">
+  <h3 class="fw-bold mb-4">About This Project</h3>
+  <div class="card card-metric p-4 mb-4">
+    <p>
+      <strong>BioFuelOpt</strong> is a.... more info to be added here...also add contributors, GitHub link, etc...
+    </p>
+  </div>
+</div>
+{% endblock %}

templates/base.html ADDED Viewed

	@@ -0,0 +1,96 @@

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>BioFuelOpt</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <!-- Bootstrap 5 -->
+  <link
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+    rel="stylesheet">
+  <!-- Icons -->
+  <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+    <!-- Custom CSS -->
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+<div class="d-flex" id="wrapper">
+  <!-- Sidebar: REPLACED WITH GLASSMORPHISM -->
+  <nav id="sidebar-wrapper" class="glass-sidebar">
+    <div class="sidebar-header text-center py-4">
+      <h5 class="fw-bold m-0">BioFuelOpt 1.0</h5>
+    </div>
+    <div class="list-group list-group-flush mt-3">
+      <a href="{{ url_for('dashboard') }}"
+         class="list-group-item sidebar-link {% if request.endpoint == 'dashboard' %}active{% endif %}">
+        <i class="bi bi-speedometer2 me-3"></i>Dashboard
+      </a>
+      <a href="{{ url_for('pure_predictor') }}"
+         class="list-group-item sidebar-link {% if request.endpoint == 'pure_predictor' %}active{% endif %}">
+        <i class="bi bi-droplet-half me-3"></i>Pure fuel predictor
+      </a>
+      <a href="{{ url_for('mixture_predictor') }}"
+         class="list-group-item sidebar-link {% if request.endpoint == 'mixture_predictor' %}active{% endif %}">
+        <i class="bi bi-bezier2 me-3"></i>Mixture fuel predictor
+      </a>
+      <a href="{{ url_for('generative') }}"
+         class="list-group-item sidebar-link {% if request.endpoint == 'generative' %}active{% endif %}">
+        <i class="bi bi-stars me-3"></i>Generative molecule
+      </a>
+      <a href="{{ url_for('constraints') }}"
+         class="list-group-item sidebar-link {% if request.endpoint == 'constraints' %}active{% endif %}">
+        <i class="bi bi-sliders me-3"></i>Fuel constraints
+      </a>
+      <a href="{{ url_for('dataset') }}"
+         class="list-group-item sidebar-link {% if request.endpoint == 'dataset' %}active{% endif %}">
+        <i class="bi bi-table me-3"></i>Dataset
+      </a>
+      <a href="{{ url_for('about') }}"
+         class="list-group-item sidebar-link {% if request.endpoint == 'about' %}active{% endif %}">
+        <i class="bi bi-info-circle me-3"></i>About
+      </a>
+    </div>
+  </nav>
+  <!-- Page content -->
+  <div id="page-content-wrapper" class="flex-grow-1">
+    <!-- Green navbar -->
+    <nav class="navbar navbar-expand-lg px-3 py-2 position-relative">
+      <button class="btn btn-outline-light me-3" id="sidebarToggle">
+        <i class="bi bi-list"></i>
+      </button>
+      <span class="navbar-title-center fw-semibold">BioFuelOpt 1.0</span>
+    </nav>
+    <main class="container-fluid py-4">
+      {% block content %}
+      {% endblock %}
+    </main>
+  </div>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+<script src="{{ url_for('static', filename='js/main.js') }}"></script>
+</body>
+</html>

templates/constraints.html ADDED Viewed

	@@ -0,0 +1,23 @@

+{% extends "base.html" %}
+{% block content %}
+<div class="container py-4">
+  <h3 class="fw-bold mb-4">Fuel Property Constraints</h3>
+  <div class="card card-metric p-4 mb-4">
+    <h5 class="fw-bold mb-3">Design Constraints Applied in BioFuelOpt</h5>
+    <ul>
+      <li><strong>DCN Range:</strong> add description here</li>
+      <li><strong>YSI Threshold:</strong> add description here</li>
+      <li><strong>More properties:</strong> more description...</li>
+    </ul>
+    <p class="text-muted mt-3">
+      Can include all relevent contraints used in the model here
+    </p>
+  </div>
+</div>
+{% endblock %}

templates/dashboard.html ADDED Viewed

	@@ -0,0 +1,78 @@

+{% extends "base.html" %}
+{% block content %}
+<div class="container py-4">
+  <!-- Title -->
+  <h2 class="fw-bold mb-3">Welcome to BioFuelOpt</h2>
+  <p class="text-muted">add description here</p>
+  <!-- Section 1: Intro to Biofuels -->
+  <div class="card card-metric p-4 mb-4">
+    <h4 class="fw-bold mb-3">Introduction to Biofuels</h4>
+    <p>
+      Add description about biofuels here. Can also include info abt compression ignition
+    </p>
+    <p>
+      Can add images or diagrams if needed
+    </p>
+  </div>
+  <!-- Section 2: DCN & YSI -->
+  <div class="card card-metric p-4 mb-4">
+    <h4 class="fw-bold mb-3">Why We Focus on DCN and YSI?</h4>
+    <p>
+      Our machine learning models target two primary fuel properties:
+    </p>
+    <ul>
+      <li><strong>Derived Cetane Number (DCN)</strong> – add explanation here</li>
+      <li><strong>Yield Sooting Index (YSI)</strong> – add explanation here</li>
+    </ul>
+    <p>
+      Can add images or diagrams if needed
+    </p>
+  </div>
+  <!-- Section 3: How the ML App Helps -->
+  <div class="card card-metric p-4 mb-4">
+    <h4 class="fw-bold mb-3">How This ML App Helps</h4>
+    <p>
+      Explanation on how the ML app can contribute to biofuel context
+    </p>
+    <ul>
+      <li>add bullet points</li>
+    </ul>
+  </div>
+  <!-- Section 4: How to Use the App -->
+  <div class="card card-metric p-4 mb-4">
+    <h4 class="fw-bold mb-3">How to Use This App</h4>
+    <p>Follow these steps to navigate the platform effectively:</p>
+    <ol>
+      <li><strong>Pure Fuel Predictor:</strong>
+          Enter IUPAC names or SMILESto predict DCN & YSI of single molecules.
+          Add multiple pure fuels to get ranked results and visual comparisons.</li>
+      <li><strong>Mixture Fuel Predictor:</strong>
+          Provide component IUPAC names or SMILES + composition percentages of all mixture components to predict DCN & YSI values.
+          Add multiple mixture fuels to get ranked results and visual comparisons.</li>
+      <li><strong>Generative Molecule:</strong>
+          Input your target DCN and let the model propose a new hypothetical molecule.</li>
+      <li><strong>Fuel Constraint:</strong>
+          Review all design guidelines applied within optimisation and prediction steps.</li>
+      <li><strong>Dataset:</strong>
+          Download the pure or mixture dataset or submit new data for review (admin approval required).</li>
+      <li><strong>About:</strong>
+          Learn more about the research background and project contributors. Github link is included here</li>
+    </ol>
+  </div>
+</div>
+{% endblock %}

templates/dataset.html ADDED Viewed

	@@ -0,0 +1,29 @@

+{% extends "base.html" %}
+{% block content %}
+<div class="container py-4">
+    <h2 class="fw-bold mb-4">Datasets Used for Model Training & Evaluation</h2>
+    <p class="text-muted">Download the exact datasets used to train and test the cetane number prediction model.</p>
+    <!-- PURE DATASET -->
+    <div class="card card-metric p-4 mb-4">
+        <h4 class="fw-bold">Pure Fuel Dataset</h4>
+        <p class="text-muted">Contains all pure fuel molecules used for the pure fuel model.</p>
+        <a href="/download/pure" class="btn btn-primary mt-2">
+            ⬇️ Download Pure Fuel Dataset (.xlsx)
+        </a>
+    </div>
+    <!-- MIXTURE DATASET -->
+    <div class="card card-metric p-4 mb-4">
+        <h4 class="fw-bold">Mixture Fuel Dataset</h4>
+        <p class="text-muted">Contains multi-component mixtures fuels used for the mixture fuel model.</p>
+        <a href="/download/mixture" class="btn btn-primary mt-2">
+            ⬇️ Download Mixture Fuel Dataset (.xlsx)
+        </a>
+    </div>
+</div>
+{% endblock %}

templates/generative.html ADDED Viewed

	@@ -0,0 +1,28 @@

+{% extends "base.html" %}
+{% block content %}
+<div class="container py-4">
+  <h3 class="fw-bold mb-4">Generative Molecule Design</h3>
+  <div class="card card-metric p-4 mb-4">
+    <h5 class="fw-bold mb-3">Generate a Molecule from Target DCN</h5>
+    <form method="POST">
+      <div class="mb-3">
+        <label class="form-label">Target DCN</label>
+        <input type="number" step="0.1" name="target_dcn" class="form-control" placeholder="ex: 45" required>
+      </div>
+      <button class="btn btn-primary" type="submit">Generate Molecule</button>
+    </form>
+  </div>
+  {% if generated %}
+  <div class="card card-metric p-4 mb-4">
+    <h5 class="fw-bold mb-3">🔬 Generated Molecule</h5>
+    {{ generated|safe }}
+  </div>
+  {% endif %}
+</div>
+{% endblock %}

templates/login.html ADDED Viewed

File without changes

templates/mixture_predictor.html ADDED Viewed

	@@ -0,0 +1,11 @@

+{% extends "base.html" %}
+{% block content %}
+<div class="container py-4">
+    <h2 class="fw-bold mb-4">Mixture Fuel Predictor</h2>
+    <p class="text-muted">add more details hhere.</p>
+</div>
+{% endblock %}

templates/pure_predictor.html ADDED Viewed

	@@ -0,0 +1,163 @@

+{% extends "base.html" %}
+{% block content %}
+<div class="container py-4">
+  <!-- Page title -->
+  <h2 class="fw-bold mb-3">Pure Fuel Cetane Number Predictor</h2>
+  <p class="text-muted">Enter one or more pure fuels using IUPAC names or SMILES to predict DCN.</p>
+  <!-- Input form card -->
+  <div class="card card-metric p-4 mb-4">
+    <h4 class="fw-bold mb-3">Input Pure Fuel Candidates</h4>
+    <form method="POST">
+      <!-- Fuel input -->
+      <div id="fuel-container">
+        <div class="row g-3 mb-3 fuel-row">
+          <div class="col-md-6">
+            <input type="text" name="fuel_name[]" class="form-control"
+                   placeholder="Fuel IUPAC Name (ex. decane)">
+          </div>
+          <div class="col-md-6">
+            <input type="text" name="smiles[]" class="form-control"
+                   placeholder="SMILES (ex. CCCCCCCCCC)">
+          </div>
+        </div>
+      </div>
+      <!-- Add more row -->
+      <button type="button" id="add-row" class="btn btn-primary mb-3">
+        + Add Another Fuel
+      </button>
+      <br>
+      <!-- Submit button -->
+      <button type="submit" class="btn btn-primary px-4 mt-2">
+        Predict
+      </button>
+    </form>
+  </div>
+  <!-- Bulk CSV Upload Section -->
+  <div class="card card-metric p-4 mb-4">
+    <h4 class="fw-bold mb-3">Bulk Prediction (CSV Upload)</h4>
+    <p class="text-muted">Upload a CSV file with columns <strong>SMILES</strong> and <strong>IUPAC names</strong>.</p>
+    <form method="POST" enctype="multipart/form-data">
+      <div class="mb-3">
+        <input type="file" name="csv_file" accept=".csv" class="form-control">
+      </div>
+      <button type="submit" name="mode" value="csv" class="btn btn-primary">
+        Upload & Predict CSV
+      </button>
+    </form>
+  </div>
+  <!-- Results Section -->
+  {% if results %}
+  <div class="card card-metric p-4 mt-4">
+    <h4 class="fw-bold mb-3">Prediction Results</h4>
+    <table class="table table-striped table-bordered mt-3">
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>SMILES</th>
+          <th>Predicted DCN</th>
+          <th>Predicted YSI</th>
+          <th>Structure</th>
+          <th>Status</th>
+        </tr>
+      </thead>
+      <tbody>
+      {% for r in results %}
+      <tr>
+        <td>{{ r.name }}</td>
+        <td>{{ r.smiles }}</td>
+        <td>
+          {% if r.dcn %}<strong>{{ r.dcn }}</strong>{% else %}-{% endif %}
+        </td>
+        <td>
+          {% if r.ysi %}<strong>{{ r.ysi }}</strong>{% else %}-{% endif %}
+        </td>
+        <td>
+          {% if r.img_id %}
+            <img src="{{ url_for('static', filename='generated/' ~ r.img_id) }}" width="120">
+          {% else %}
+            -
+          {% endif %}
+        </td>
+        <td>
+          {% if r.error %}
+            <span class="text-danger">{{ r.error }}</span>
+          {% else %}
+            <span class="text-success fw-bold">OK</span>
+          {% endif %}
+        </td>
+      </tr>
+      {% endfor %}
+      </tbody>
+    </table>
+    <!-- Download CSV -->
+    <form method="POST" action="{{ url_for('download_results') }}">
+      <input type="hidden" name="results_data" value='{{ results | tojson }}'>
+      <button type="submit" class="btn btn-primary mt-3">
+        ⬇️ Download Results as CSV
+      </button>
+    </form>
+  </div>
+  {% endif %}
+</div>
+<!-- JavaScript to dynamically add ONLY new rows -->
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const container = document.getElementById("fuel-container");
+    const addRowBtn = document.getElementById("add-row");
+    addRowBtn.addEventListener("click", function () {
+      const row = document.createElement("div");
+      row.classList.add("row", "g-3", "mb-3", "fuel-row");
+      row.innerHTML = `
+        <div class="col-md-6">
+          <input type="text" name="fuel_name[]" class="form-control"
+                 placeholder="Fuel IUPAC Name (ex. decane)">
+        </div>
+        <div class="col-md-6">
+          <input type="text" name="smiles[]" class="form-control"
+                 placeholder="SMILES (ex. CCCCCCCCCC)">
+        </div>
+      `;
+      container.appendChild(row);
+    });
+  });
+</script>
+{% endblock %}