Spaces:

alterzick
/

swab-calculation

Running

App Files Files Community

alterzick commited on Dec 2, 2025

Commit

e623f18

verified ·

1 Parent(s): e272289

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +370 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Swab Calculation
-emoji: 👁
-colorFrom: gray
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: swab-calculation
+emoji: ⚛️
+colorFrom: pink
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - QwenSite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,370 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>SWAB & FFR Calculation Tool</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet"/>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600;700&display=swap');
+    body {
+      font-family: 'Poppins', sans-serif;
+    }
+    .input-group {
+      @apply mb-4 flex flex-col;
+    }
+    .input-group label {
+      @apply text-sm font-medium text-gray-700 mb-1;
+    }
+    .input-group input, .input-group select {
+      @apply p-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500;
+    }
+    .card {
+      @apply bg-white p-6 rounded-xl shadow-lg border border-gray-100 transition-all duration-300 hover:shadow-xl;
+    }
+    .btn {
+      @apply px-5 py-2.5 rounded-lg font-medium text-white transition-all duration-200 focus:outline-none focus:ring-2;
+    }
+    .btn-blue {
+      @apply bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
+    }
+    .btn-green {
+      @apply bg-green-600 hover:bg-green-700 focus:ring-green-500;
+    }
+    .btn-red {
+      @apply bg-red-600 hover:bg-red-700 focus:ring-red-500;
+    }
+    .table-container {
+      @apply mt-6 overflow-x-auto rounded-lg border border-gray-200 shadow;
+    }
+    table {
+      @apply w-full bg-white border-collapse text-sm;
+    }
+    th, td {
+      @apply px-4 py-3 border-b border-gray-200 text-left;
+    }
+    th {
+      @apply bg-gray-50 font-semibold text-gray-700;
+    }
+    tr:hover {
+      @apply bg-blue-50;
+    }
+  </style>
+</head>
+<body class="bg-gradient-to-br from-blue-50 via-white to-indigo-50 min-h-screen">
+  <div class="container mx-auto px-4 py-8">
+    <header class="text-center mb-10">
+      <h1 class="text-4xl font-bold text-gray-800 mb-2">
+        <i class="fas fa-calculator text-blue-600"></i> SWAB & FFR Calculation System
+      </h1>
+      <p class="text-gray-600">Analyze fluid levels, load, depth, and production performance</p>
+    </header>
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+      <!-- Input Panel -->
+      <div class="lg:col-span-1">
+        <div class="card">
+          <h2 class="text-xl font-semibold text-gray-800 mb-5">Input Data</h2>
+          <form id="calcForm">
+            <div class="input-group">
+              <label>Well Name</label>
+              <input type="text" id="wellName" required placeholder="e.g. Well-001"/>
+            </div>
+            <div class="input-group">
+              <label>Fluid Gradient (psi/ft)</label>
+              <input type="number" id="fluidGradient" value="0.465" step="0.001" required/>
+            </div>
+            <div class="input-group">
+              <label>Measured Depth (ft)</label>
+              <input type="number" id="measuredDepth" required placeholder="e.g. 8000"/>
+            </div>
+            <div class="input-group">
+              <label>Fluid Level (ft from surface)</label>
+              <input type="number" id="fluidLevel" required placeholder="e.g. 2500"/>
+            </div>
+            <div class="input-group">
+              <label>API Gravity</label>
+              <input type="number" id="apiGravity" step="0.1" required placeholder="e.g. 35.2"/>
+            </div>
+            <div class="input-group">
+              <label>Production Fluid (BBL/Day)</label>
+              <input type="number" id="production" required placeholder="e.g. 420"/>
+            </div>
+            <div class="input-group">
+              <label>Swab Load (lbs)</label>
+              <input type="number" id="swabLoad" required placeholder="e.g. 8500"/>
+            </div>
+            <button type="button" onclick="calculate()" class="btn btn-blue w-full mt-2">
+              <i class="fas fa-calculator"></i> Calculate
+            </button>
+            <button type="button" onclick="saveData()" class="btn btn-green w-full mt-2">
+              <i class="fas fa-save"></i> Save to Database
+            </button>
+          </form>
+        </div>
+      </div>
+      <!-- Results Panel -->
+      <div class="lg:col-span-2">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+          <div class="card">
+            <h3 class="text-lg font-semibold text-gray-800 mb-3">Key Results</h3>
+            <ul class="space-y-2 text-gray-700">
+              <li><strong>Static Fluid Level:</strong> <span id="resultStaticLevel">-</span> ft</li>
+              <li><strong>Bottom Hole Pressure:</strong> <span id="resultBHP">-</span> psi</li>
+              <li><strong>Working Fluid Level:</strong> <span id="resultWorkingFluid">-</span> ft</li>
+              <li><strong>Formation Productivity (FFR):</strong> <span id="resultFFR">-</span> BBL/psi</li>
+              <li><strong>Fluid Density:</strong> <span id="resultDensity">-</span> lb/ft³</li>
+            </ul>
+          </div>
+          <div class="card">
+            <h3 class="text-lg font-semibold text-gray-800 mb-3">Depth & Load Analysis</h3>
+            <ul class="space-y-2 text-gray-700">
+              <li><strong>Depth Below Fluid Level:</strong> <span id="resultDepthBelow">-</span> ft</li>
+              <li><strong>Pump Depth Utilization:</strong> <span id="resultUtilization">-</span>%</li>
+              <li><strong>Hydrostatic Pressure:</strong> <span id="resultHydro">-</span> psi</li>
+              <li><strong>Swab Efficiency:</strong> <span id="resultSwabEff">-</span>%</li>
+              <li><strong>Load per Barrel:</strong> <span id="resultLoadPerBarrel">-</span> lbs/bbl</li>
+            </ul>
+          </div>
+        </div>
+        <!-- Visualization -->
+        <div class="card">
+          <h3 class="text-lg font-semibold text-gray-800 mb-4">Well Profile Visualization</h3>
+          <canvas id="wellProfileChart" height="100"></canvas>
+        </div>
+      </div>
+    </div>
+    <!-- Database Table -->
+    <div class="mt-10 card">
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="text-2xl font-semibold text-gray-800">Database Records</h2>
+        <button onclick="clearDatabase()" class="btn btn-red text-sm">
+          <i class="fas fa-trash"></i> Clear All
+        </button>
+      </div>
+      <div class="table-container">
+        <table id="dataTable">
+          <thead>
+            <tr>
+              <th>Well</th>
+              <th>Fluid Level (ft)</th>
+              <th>WFL (ft)</th>
+              <th>FFR (BBL/psi)</th>
+              <th>Load (lbs)</th>
+              <th>Load/BBL</th>
+              <th>Depth (ft)</th>
+              <th>Date</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <!-- Data will be populated here -->
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+  <script>
+    // Initialize local storage
+    if (!localStorage.getItem('swabData')) {
+      localStorage.setItem('swabData', JSON.stringify([]));
+    }
+    // Chart initialization
+    let wellChart;
+    window.onload = function() {
+      loadDatabase();
+      initChart();
+    };
+    function initChart() {
+      const ctx = document.getElementById('wellProfileChart').getContext('2d');
+      wellChart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+          labels: ['Surface', 'Fluid Level', 'Measured Depth'],
+          datasets: [{
+            label: 'Depth (ft)',
+            data: [0, 0, 0],
+            backgroundColor: [
+              'rgba(54, 162, 235, 0.6)',
+              'rgba(255, 205, 86, 0.6)',
+              'rgba(75, 192, 192, 0.6)'
+            ],
+            borderColor: [
+              'rgba(54, 162, 235, 1)',
+              'rgba(255, 205, 86, 1)',
+              'rgba(75, 192, 192, 1)'
+            ],
+            borderWidth: 1
+          }]
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true,
+              reverse: true,
+              title: {
+                display: true,
+                text: 'Depth from Surface (ft)'
+              }
+            }
+          },
+          plugins: {
+            legend: {
+              display: false
+            }
+          }
+        }
+      });
+    }
+    function calculate() {
+      // Get input values
+      const fluidGradient = parseFloat(document.getElementById('fluidGradient').value);
+      const measuredDepth = parseFloat(document.getElementById('measuredDepth').value);
+      const fluidLevel = parseFloat(document.getElementById('fluidLevel').value);
+      const apiGravity = parseFloat(document.getElementById('apiGravity').value);
+      const production = parseFloat(document.getElementById('production').value);
+      const swabLoad = parseFloat(document.getElementById('swabLoad').value);
+      // Calculations
+      const staticFluidLevel = fluidLevel;
+      const depthBelowFluid = measuredDepth - fluidLevel;
+      const hydrostaticPressure = fluidGradient * depthBelowFluid;
+      const bottomHolePressure = fluidGradient * measuredDepth;
+      const workingFluidLevel = fluidLevel + (swabLoad / (fluidGradient * 144)); // assuming conversion
+      const fluidDensity = 141.5 / (apiGravity + 131.5) * 62.4;  // lb/ft³
+      const ffr = production / hydrostaticPressure; // Formation Productivity Index
+      const pumpUtilization = (fluidLevel / measuredDepth) * 100;
+      const swabEfficiency = (workingFluidLevel <= measuredDepth) ? 100 : (measuredDepth / workingFluidLevel) * 100;
+      const loadPerBarrel = swabLoad / production;
+      // Display results
+      document.getElementById('resultStaticLevel').textContent = staticFluidLevel.toFixed(0);
+      document.getElementById('resultBHP').textContent = bottomHolePressure.toFixed(0);
+      document.getElementById('resultWorkingFluid').textContent = workingFluidLevel.toFixed(0);
+      document.getElementById('resultFFR').textContent = ffr.toFixed(4);
+      document.getElementById('resultDensity').textContent = fluidDensity.toFixed(2);
+      document.getElementById('resultDepthBelow').textContent = depthBelowFluid.toFixed(0);
+      document.getElementById('resultUtilization').textContent = pumpUtilization.toFixed(1);
+      document.getElementById('resultHydro').textContent = hydrostaticPressure.toFixed(0);
+      document.getElementById('resultSwabEff').textContent = swabEfficiency.toFixed(1);
+      document.getElementById('resultLoadPerBarrel').textContent = loadPerBarrel.toFixed(2);
+      // Update chart
+      wellChart.data.datasets[0].data = [0, fluidLevel, measuredDepth];
+      wellChart.update();
+    }
+    function saveData() {
+      const wellName = document.getElementById('wellName').value;
+      if (!wellName) {
+        alert('Please enter a well name');
+        return;
+      }
+      const data = {
+        well: wellName,
+        fluidLevel: parseFloat(document.getElementById('fluidLevel').value),
+        wfl: parseFloat(document.getElementById('resultWorkingFluid').textContent),
+        ffr: parseFloat(document.getElementById('resultFFR').textContent),
+        load: parseFloat(document.getElementById('swabLoad').value),
+        loadPerBarrel: parseFloat(document.getElementById('resultLoadPerBarrel').textContent),
+        depth: parseFloat(document.getElementById('measuredDepth').value),
+        timestamp: new Date().toLocaleString()
+      };
+      const storedData = JSON.parse(localStorage.getItem('swabData'));
+      storedData.push(data);
+      localStorage.setItem('swabData', JSON.stringify(storedData));
+      loadDatabase();
+      alert(`Data for Well ${wellName} saved successfully!`);
+    }
+    function loadDatabase() {
+      const tableBody = document.querySelector('#dataTable tbody');
+      tableBody.innerHTML = '';
+      const storedData = JSON.parse(localStorage.getItem('swabData'));
+      storedData.forEach((item, index) => {
+        const row = document.createElement('tr');
+        row.innerHTML = `
+          <td class="font-medium">${item.well}</td>
+          <td>${item.fluidLevel}</td>
+          <td>${item.wfl.toFixed(0)}</td>
+          <td>${item.ffr.toFixed(4)}</td>
+          <td>${item.load.toLocaleString()}</td>
+          <td>${item.loadPerBarrel.toFixed(2)}</td>
+          <td>${item.depth}</td>
+          <td class="text-sm text-gray-500">${item.timestamp}</td>
+          <td>
+            <button onclick="loadRecord(${index})" class="text-blue-600 hover:text-blue-800 mr-2" title="Load">
+              <i class="fas fa-upload"></i>
+            </button>
+            <button onclick="deleteRecord(${index})" class="text-red-600 hover:text-red-800" title="Delete">
+              <i class="fas fa-trash"></i>
+            </button>
+          </td>
+        `;
+        tableBody.appendChild(row);
+      });
+    }
+    function loadRecord(index) {
+      const storedData = JSON.parse(localStorage.getItem('swabData'));
+      const data = storedData[index];
+      document.getElementById('wellName').value = data.well;
+      document.getElementById('fluidLevel').value = data.fluidLevel;
+      document.getElementById('measuredDepth').value = data.depth;
+      document.getElementById('swabLoad').value = data.load;
+      // Auto calculate
+      calculate();
+      alert(`Data for ${data.well} loaded!`);
+    }
+    function deleteRecord(index) {
+      if (confirm('Are you sure you want to delete this record?')) {
+        const storedData = JSON.parse(localStorage.getItem('swabData'));
+        storedData.splice(index, 1);
+        localStorage.setItem('swabData', JSON.stringify(storedData));
+        loadDatabase();
+      }
+    }
+    function clearDatabase() {
+      if (confirm('Are you sure you want to delete ALL records? This cannot be undone.')) {
+        localStorage.setItem('swabData', JSON.stringify([]));
+        loadDatabase();
+      }
+    }
+  </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-qwensite.hf.space/logo.svg" alt="qwensite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-qwensite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >QwenSite</a> - 🧬 <a href="https://enzostvs-qwensite.hf.space?remix=alterzick/swab-calculation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ buatkan swab calculation and database for ffr , working fluid level , load , depth buy feet and load using bbl