Initial commit

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,3 @@
+venv/
+__pycache__/
+-files

Dockerfile

@@ -0,0 +1,9 @@
+FROM python:3.9
+
+WORKDIR /app
+
+COPY . .
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,11 @@
+---
+title: VoltageDrop
+emoji: 🐢
+colorFrom: green
+colorTo: indigo
+sdk: static
+pinned: false
+license: apache-2.0
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

main.py

@@ -0,0 +1,77 @@
+from fastapi import FastAPI, Request, Depends, HTTPException, Form
+from fastapi.responses import HTMLResponse, RedirectResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from sqlalchemy.orm import Session
+from pydantic import BaseModel
+from models import Base, Cable, SessionLocal, init_db
+
+app = FastAPI()
+
+# Initialize the database
+init_db()
+
+# Serve static files
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+templates = Jinja2Templates(directory="templates")
+
+class VoltageDropRequest(BaseModel):
+    voltage: float
+    load: float
+    length: float
+    cable_type: str
+
+def get_db():
+    db = SessionLocal()
+    try:
+        yield db
+    finally:
+        db.close()
+
+def calculate_voltage_drop(voltage, load, length, resistance):
+    return voltage - (load * length * resistance)
+
+@app.get("/", response_class=HTMLResponse)
+async def read_root(request: Request, db: Session = Depends(get_db)):
+    cables = db.query(Cable).all()
+    return templates.TemplateResponse("index.html", {"request": request, "cables": cables})
+
+@app.post("/calculate")
+async def calculate(request: VoltageDropRequest, db: Session = Depends(get_db)):
+    cable = db.query(Cable).filter(Cable.type == request.cable_type).first()
+    if not cable:
+        raise HTTPException(status_code=400, detail="Invalid cable type")
+    result = calculate_voltage_drop(request.voltage, request.load, request.length, cable.resistance)
+    return {"voltage_drop": result}
+
+@app.get("/edit_cables", response_class=HTMLResponse)
+async def edit_cables(request: Request, db: Session = Depends(get_db)):
+    cables = db.query(Cable).all()
+    return templates.TemplateResponse("edit_cables.html", {"request": request, "cables": cables})
+
+@app.post("/add_cable")
+async def add_cable(type: str = Form(...), resistance: float = Form(...), db: Session = Depends(get_db)):
+    cable = Cable(type=type, resistance=resistance)
+    db.add(cable)
+    db.commit()
+    return RedirectResponse(url="/edit_cables", status_code=303)
+
+@app.post("/edit_cable/{cable_id}")
+async def edit_cable(cable_id: int, type: str = Form(...), resistance: float = Form(...), db: Session = Depends(get_db)):
+    cable = db.query(Cable).filter(Cable.id == cable_id).first()
+    if not cable:
+        raise HTTPException(status_code=404, detail="Cable not found")
+    cable.type = type
+    cable.resistance = resistance
+    db.commit()
+    return RedirectResponse(url="/edit_cables", status_code=303)
+
+@app.post("/delete_cable/{cable_id}")
+async def delete_cable(cable_id: int, db: Session = Depends(get_db)):
+    cable = db.query(Cable).filter(Cable.id == cable_id).first()
+    if not cable:
+        raise HTTPException(status_code=404, detail="Cable not found")
+    db.delete(cable)
+    db.commit()
+    return RedirectResponse(url="/edit_cables", status_code=303)

models.py

@@ -0,0 +1,19 @@
+from sqlalchemy import Column, Integer, String, Float, create_engine
+from sqlalchemy.ext.declarative import declarative_base
+from sqlalchemy.orm import sessionmaker
+
+DATABASE_URL = "sqlite:///./database.db"
+
+Base = declarative_base()
+
+class Cable(Base):
+    __tablename__ = "cables"
+    id = Column(Integer, primary_key=True, index=True)
+    type = Column(String, unique=True, index=True)
+    resistance = Column(Float)
+
+engine = create_engine(DATABASE_URL)
+SessionLocal = sessionmaker(autocommit=False, autoflush=False, bind=engine)
+
+def init_db():
+    Base.metadata.create_all(bind=engine)

requirements.txt

@@ -0,0 +1,5 @@
+fastapi
+uvicorn
+jinja2
+sqlalchemy
+python-multipart

space.yml

@@ -0,0 +1 @@
+sdk: docker

static/app.js

@@ -0,0 +1,46 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const form = document.getElementById('calculator-form');
+    const calculateButton = document.querySelector('.btn-calculate');
+
+    // Function to check if all form fields are filled
+    function checkFormValidity() {
+        const isValid = form.checkValidity();
+        if (isValid) {
+            calculateButton.disabled = false;
+            calculateButton.classList.add('enabled');
+        } else {
+            calculateButton.disabled = true;
+            calculateButton.classList.remove('enabled');
+        }
+    }
+
+    // Listen for input events on the form to trigger validation
+    form.addEventListener('input', checkFormValidity);
+
+    // Initially check the form validity on page load
+    checkFormValidity();
+
+    // Handle form submission
+    form.addEventListener('submit', async function(event) {
+        event.preventDefault();
+
+        const formData = new FormData(event.target);
+        const data = {
+            voltage: parseFloat(formData.get('voltage')),
+            load: parseFloat(formData.get('load')),
+            length: parseFloat(formData.get('length')),
+            cable_type: formData.get('cable_type')
+        };
+
+        const response = await fetch('/calculate', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data)
+        });
+
+        const result = await response.json();
+        document.getElementById('result').innerText = `Result Voltage: ${result.voltage_drop} V`;
+    });
+});

static/styles.css

@@ -0,0 +1,176 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    background-color: #f8f9fa;
+}
+
+header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #343a40;
+    color: white;
+    width: 100%;
+    padding: 20px 0;
+}
+
+.calculator-form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+#logo {
+    height: 50px;
+    margin-right: 20px;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 30px;
+    width: 100%;
+    max-width: 600px;
+    padding: 20px;
+    background-color: white;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+}
+
+.add-cable-section,
+.existing-cables-section {
+    width: 100%;
+    margin-bottom: 30px;
+}
+
+.add-cable-section h2,
+.existing-cables-section h2 {
+    margin-bottom: 20px;
+    color: #343a40;
+}
+
+.form-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 15px;
+}
+
+.form-row label {
+    flex-basis: 30%;
+    font-weight: bold;
+}
+
+.form-row input {
+    flex-basis: 65%;
+    padding: 8px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+}
+
+.form-row select {
+    flex-basis: 65%;
+    padding: 8px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+}
+
+.btn {
+    padding: 8px 16px;
+    font-size: 14px;
+    cursor: pointer;
+    border: none;
+    color: white;
+    border-radius: 4px;
+}
+
+.btn-add {
+    background-color: #28a745;
+    width: 100%;
+}
+
+.btn-save {
+    background-color: #007bff;
+    margin-right: 5px;
+}
+
+.btn-delete {
+    background-color: #dc3545;
+}
+
+.btn-group {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+}
+
+.section-divider {
+    margin: 40px 0;
+    border: 0;
+    border-top: 2px solid #dee2e6;
+    width: 100%;
+}
+
+.cable-divider {
+    margin: 20px 0;
+    border: 0;
+    border-top: 1px solid #dee2e6;
+    width: 100%;
+}
+
+.btn-back {
+    background-color: #007bff;
+    color: white;
+    padding: 10px 20px;
+    font-size: 16px;
+    text-align: center;
+    text-decoration: none;
+    margin-top: 30px;
+    display: inline-block;
+    border-radius: 5px;
+    width: 100%;
+}
+
+.btn-back:hover {
+    background-color: #0056b3;
+}
+.btn-calculate {
+    background-color: #6c757d; /* Disabled state */
+    color: white;
+    padding: 10px 20px;
+    font-size: 18px;
+    border: none;
+    cursor: not-allowed;
+    border-radius: 4px;
+    margin-top: 20px;
+    width: 100%;
+    text-align: center;
+    transition: background-color 0.3s ease;
+}
+
+.btn-calculate.enabled {
+    background-color: #28a745; /* Enabled state */
+    cursor: pointer;
+}
+
+.btn-calculate:hover.enabled {
+    background-color: #218838;
+}
+
+.result-display {
+    margin-top: 30px;
+    font-size: 24px;
+    color: #28a745;
+    text-align: center;
+    padding: 20px;
+    border-top: 2px solid #dee2e6;
+    width: 100%;
+}
+

templates/edit_cables.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Edit Cables</title>
+    <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+    <header>
+        <h1>Edit Cables</h1>
+    </header>
+    <main>
+        <section class="add-cable-section">
+            <h2>Add Cable</h2>
+            <form action="/add_cable" method="post" class="cable-form">
+                <div class="form-row">
+                    <label for="type">Cable Type:</label>
+                    <input type="text" id="type" name="type" required>
+                </div>
+                <div class="form-row">
+                    <label for="resistance">Resistance:</label>
+                    <input type="number" step="0.01" id="resistance" name="resistance" required>
+                </div>
+                <div class="form-group">
+                    <button type="submit" class="btn btn-add">Add Cable</button>
+                </div>
+            </form>
+        </section>
+
+        <hr class="section-divider">
+
+        <section class="existing-cables-section">
+            <h2>Existing Cables</h2>
+            <div class="cable-list">
+                {% for cable in cables %}
+                <form action="/edit_cable/{{ cable.id }}" method="post" class="cable-form">
+                    <div class="form-row">
+                        <label for="type">Cable Type:</label>
+                        <input type="text" id="type" name="type" value="{{ cable.type }}" required>
+                    </div>
+                    <div class="form-row">
+                        <label for="resistance">Resistance:</label>
+                        <input type="number" step="0.01" id="resistance" name="resistance" value="{{ cable.resistance }}" required>
+                    </div>
+                    <div class="form-row btn-group">
+                        <button type="submit" class="btn btn-save">Save</button>
+                        <button formaction="/delete_cable/{{ cable.id }}" formmethod="post" class="btn btn-delete">Delete</button>
+                    </div>
+                </form>
+                <hr class="cable-divider">
+                {% endfor %}
+            </div>
+        </section>
+        <a href="/" class="btn btn-back">Back to Calculator</a>
+    </main>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Voltage Drop Calculator</title>
+    <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+    <header>
+        <img src="/static/logo.png" alt="Company Logo" id="logo">
+        <h1>Voltage Drop Calculator</h1>
+    </header>
+    <main class="calculator-main">
+        <form id="calculator-form" class="calculator-form">
+            <div class="form-row">
+                <label for="cable_type">Cable Type:</label>
+                <select id="cable_type" name="cable_type" required>
+                    {% for cable in cables %}
+                    <option value="{{ cable.type }}">{{ cable.type }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+
+            <div class="form-row">
+                <label for="voltage">Voltage:</label>
+                <input type="number" id="voltage" name="voltage" required>
+            </div>
+
+            <div class="form-row">
+                <label for="load">Load (A):</label>
+                <input type="number" id="load" name="load" required>
+            </div>
+
+            <div class="form-row">
+                <label for="length">Length (m):</label>
+                <input type="number" id="length" name="length" required>
+            </div>
+
+            <button type="submit" class="btn btn-calculate">Calculate</button>
+        </form>
+
+        <div id="result" class="result-display"></div>
+
+        <a href="/edit_cables" class="btn btn-back">Edit Cables</a>
+    </main>
+    <script src="/static/app.js"></script>
+</body>
+</html>