Spaces:

mlbench123
/

sam_dxf_control_smoothing

Sleeping

App Files Files Community

mlbench123 commited on Mar 9

Commit

e267df1

verified ·

1 Parent(s): d0e1b15

Create index.html

Browse files

Files changed (1) hide show

index.html +468 -0

index.html ADDED Viewed

	@@ -0,0 +1,468 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DXF Canvas Composer API [TEST v2]</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #e05d44 0%, #a02020 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        .header {
+            background: white;
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            margin-bottom: 20px;
+        }
+        .header h1 {
+            color: #333;
+            font-size: 32px;
+            margin-bottom: 10px;
+        }
+        .header p {
+            color: #666;
+            font-size: 16px;
+        }
+        .status-card {
+            background: white;
+            padding: 25px;
+            border-radius: 15px;
+            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
+            margin-bottom: 20px;
+        }
+        .status-indicator {
+            display: inline-flex;
+            align-items: center;
+            gap: 10px;
+            padding: 10px 20px;
+            border-radius: 25px;
+            font-weight: 600;
+            font-size: 14px;
+            margin-bottom: 15px;
+        }
+        .status-running {
+            background: #10b981;
+            color: white;
+        }
+        .status-error {
+            background: #ef4444;
+            color: white;
+        }
+        .status-checking {
+            background: #f59e0b;
+            color: white;
+        }
+        .pulse {
+            width: 12px;
+            height: 12px;
+            background: white;
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.4; }
+        }
+        .info-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-top: 20px;
+        }
+        .info-item {
+            padding: 15px;
+            background: #f8fafc;
+            border-radius: 10px;
+            border-left: 4px solid #667eea;
+        }
+        .info-item label {
+            display: block;
+            font-size: 12px;
+            color: #64748b;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            margin-bottom: 5px;
+        }
+        .info-item .value {
+            font-size: 18px;
+            font-weight: 600;
+            color: #1e293b;
+        }
+        .test-section {
+            background: white;
+            padding: 25px;
+            border-radius: 15px;
+            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
+            margin-bottom: 20px;
+        }
+        .test-section h2 {
+            color: #333;
+            margin-bottom: 20px;
+            font-size: 24px;
+        }
+        textarea {
+            width: 100%;
+            min-height: 300px;
+            padding: 15px;
+            border: 2px solid #e2e8f0;
+            border-radius: 10px;
+            font-family: 'Courier New', monospace;
+            font-size: 13px;
+            resize: vertical;
+            margin-bottom: 15px;
+        }
+        textarea:focus {
+            outline: none;
+            border-color: #667eea;
+        }
+        .btn-group {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+        }
+        button {
+            padding: 12px 24px;
+            border: none;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+        .btn-primary {
+            background: #667eea;
+            color: white;
+        }
+        .btn-primary:hover {
+            background: #5568d3;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+        .btn-secondary {
+            background: #e2e8f0;
+            color: #475569;
+        }
+        .btn-secondary:hover {
+            background: #cbd5e1;
+        }
+        .btn-primary:disabled {
+            background: #94a3b8;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .response-section {
+            background: white;
+            padding: 25px;
+            border-radius: 15px;
+            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
+        }
+        .response-section h2 {
+            color: #333;
+            margin-bottom: 15px;
+            font-size: 24px;
+        }
+        .response-content {
+            background: #1e293b;
+            color: #e2e8f0;
+            padding: 20px;
+            border-radius: 10px;
+            font-family: 'Courier New', monospace;
+            font-size: 13px;
+            max-height: 500px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+        .loading {
+            display: inline-block;
+            width: 14px;
+            height: 14px;
+            border: 2px solid white;
+            border-top-color: transparent;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            margin-right: 8px;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .footer {
+            text-align: center;
+            color: white;
+            margin-top: 30px;
+            padding: 20px;
+            font-size: 14px;
+            opacity: 0.9;
+        }
+        .link-output {
+            margin-top: 15px;
+            padding: 15px;
+            background: #f0fdf4;
+            border: 2px solid #10b981;
+            border-radius: 8px;
+        }
+        .link-output a {
+            color: #059669;
+            font-weight: 600;
+            text-decoration: none;
+            word-break: break-all;
+        }
+        .link-output a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🧪 DXF Canvas Composer API [TEST v2]</h1>
+            <p>Industrial-scale tool layout composition system with AWS S3 integration</p>
+        </div>
+        <div class="status-card">
+            <div class="status-indicator status-checking" id="statusIndicator">
+                <span class="pulse"></span>
+                <span id="statusText">Checking API Status...</span>
+            </div>
+            <div class="info-grid" id="infoGrid">
+                <div class="info-item">
+                    <label>S3 Available</label>
+                    <div class="value" id="s3Status">-</div>
+                </div>
+                <div class="info-item">
+                    <label>AWS Region</label>
+                    <div class="value" id="awsRegion">-</div>
+                </div>
+                <div class="info-item">
+                    <label>S3 Bucket</label>
+                    <div class="value" id="s3Bucket">-</div>
+                </div>
+                <div class="info-item">
+                    <label>Cache Directory</label>
+                    <div class="value" id="cacheDir">-</div>
+                </div>
+            </div>
+        </div>
+        <div class="test-section">
+            <h2>Image → DXF Converter</h2>
+            <p style="color:#666;margin-bottom:20px;">Upload an original image and its segmentation mask. The DXF will download automatically.</p>
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;">
+                <div>
+                    <label style="display:block;font-weight:600;margin-bottom:8px;color:#333;">Original Image <span style="color:#ef4444">*</span></label>
+                    <input type="file" id="imageFile" accept="image/*"
+                        style="width:100%;padding:10px;border:2px dashed #667eea;border-radius:8px;cursor:pointer;">
+                    <div id="imagePreview" style="margin-top:10px;display:none;">
+                        <img id="imagePreviewImg" style="max-width:100%;max-height:150px;border-radius:6px;border:1px solid #e2e8f0;">
+                    </div>
+                </div>
+                <div>
+                    <label style="display:block;font-weight:600;margin-bottom:8px;color:#333;">Segmentation Mask <span style="color:#ef4444">*</span></label>
+                    <input type="file" id="maskFile" accept="image/*"
+                        style="width:100%;padding:10px;border:2px dashed #10b981;border-radius:8px;cursor:pointer;">
+                    <div id="maskPreview" style="margin-top:10px;display:none;">
+                        <img id="maskPreviewImg" style="max-width:100%;max-height:150px;border-radius:6px;border:1px solid #e2e8f0;">
+                    </div>
+                </div>
+            </div>
+            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:15px;margin-bottom:20px;">
+                <div>
+                    <label style="display:block;font-weight:600;margin-bottom:6px;color:#333;">Length</label>
+                    <input type="number" id="lengthVal" value="8.5" step="0.01" min="0.01"
+                        style="width:100%;padding:10px;border:2px solid #e2e8f0;border-radius:8px;font-size:15px;">
+                </div>
+                <div>
+                    <label style="display:block;font-weight:600;margin-bottom:6px;color:#333;">Depth</label>
+                    <input type="number" id="depthVal" value="0.5" step="0.01" min="0"
+                        style="width:100%;padding:10px;border:2px solid #e2e8f0;border-radius:8px;font-size:15px;">
+                </div>
+                <div>
+                    <label style="display:block;font-weight:600;margin-bottom:6px;color:#333;">Unit</label>
+                    <select id="unitVal" style="width:100%;padding:10px;border:2px solid #e2e8f0;border-radius:8px;font-size:15px;">
+                        <option value="inches">inches</option>
+                        <option value="mm">mm</option>
+                    </select>
+                </div>
+            </div>
+            <div class="btn-group">
+                <button class="btn-primary" id="convertBtn" onclick="convertImageToDxf()">
+                    <span id="convertBtnText">⬇ Convert & Download DXF</span>
+                </button>
+                <button class="btn-secondary" onclick="clearConvertResponse()">Clear</button>
+            </div>
+        </div>
+        <div class="response-section">
+            <h2>Status</h2>
+            <div class="response-content" id="responseContent">Ready. Select images and click Convert.</div>
+            <div id="previewSection" style="display:none;margin-top:20px;">
+                <h3 style="margin-bottom:12px;color:#333;">Preview Images (from S3)</h3>
+                <div style="display:grid;grid-template-columns:1fr 1fr;gap:15px;">
+                    <div>
+                        <p style="font-weight:600;margin-bottom:6px;color:#64748b;font-size:13px;">ORIGINAL IMAGE</p>
+                        <img id="previewOriginal" src="" style="width:100%;border-radius:8px;border:1px solid #e2e8f0;">
+                    </div>
+                    <div>
+                        <p style="font-weight:600;margin-bottom:6px;color:#64748b;font-size:13px;">CONTOUR PREVIEW</p>
+                        <img id="previewContour" src="" style="width:100%;border-radius:8px;border:1px solid #e2e8f0;">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="footer">
+            Powered by Hugging Face • AWS S3 • ezdxf [TEST v2 — mask input + auto-download]
+        </div>
+    </div>
+    <script>
+        const HEALTH_ENDPOINT   = '/test/api/health';
+        const IMG2DXF_ENDPOINT  = '/test/api/image-to-dxf';
+        // ── Image preview helpers ──────────────────────────────────────────────
+        document.getElementById('imageFile').addEventListener('change', function() {
+            showPreview(this, 'imagePreview', 'imagePreviewImg');
+        });
+        document.getElementById('maskFile').addEventListener('change', function() {
+            showPreview(this, 'maskPreview', 'maskPreviewImg');
+        });
+        function showPreview(input, containerId, imgId) {
+            const container = document.getElementById(containerId);
+            const img       = document.getElementById(imgId);
+            if (input.files && input.files[0]) {
+                const reader = new FileReader();
+                reader.onload = e => {
+                    img.src = e.target.result;
+                    container.style.display = 'block';
+                };
+                reader.readAsDataURL(input.files[0]);
+            }
+        }
+        // ── Health check ───────────────────────────────────────────────────────
+        async function checkHealth() {
+            try {
+                const response = await fetch(HEALTH_ENDPOINT);
+                const data     = await response.json();
+                const indicator = document.getElementById('statusIndicator');
+                const text      = document.getElementById('statusText');
+                if (data.status === 'healthy') {
+                    indicator.className = 'status-indicator status-running';
+                    text.textContent    = 'API Running';
+                } else {
+                    indicator.className = 'status-indicator status-error';
+                    text.textContent    = 'API Error';
+                }
+                document.getElementById('s3Status').textContent  = data.s3_available ? 'Yes' : 'No';
+                document.getElementById('awsRegion').textContent = data.aws_region  || '-';
+                document.getElementById('s3Bucket').textContent  = data.s3_bucket   || '-';
+                document.getElementById('cacheDir').textContent  = data.cache_dir   || '-';
+            } catch (error) {
+                document.getElementById('statusIndicator').className = 'status-indicator status-error';
+                document.getElementById('statusText').textContent    = 'Connection Failed';
+            }
+        }
+        // ── Convert image + mask → DXF download ───────────────────────────────
+        async function convertImageToDxf() {
+            const btn     = document.getElementById('convertBtn');
+            const btnText = document.getElementById('convertBtnText');
+            const status  = document.getElementById('responseContent');
+            const imageFile = document.getElementById('imageFile').files[0];
+            const maskFile  = document.getElementById('maskFile').files[0];
+            if (!imageFile) { alert('Please select an original image.'); return; }
+            if (!maskFile)  { alert('Please select a segmentation mask.'); return; }
+            const length = document.getElementById('lengthVal').value;
+            const depth  = document.getElementById('depthVal').value;
+            const unit   = document.getElementById('unitVal').value;
+            btn.disabled         = true;
+            btnText.innerHTML    = '<span class="loading"></span>Processing...';
+            status.textContent   = 'Uploading images and generating DXF...\nThis may take 10–30 seconds.';
+            document.getElementById('previewSection').style.display = 'none';
+            try {
+                const formData = new FormData();
+                formData.append('image',  imageFile);
+                formData.append('mask',   maskFile);
+                formData.append('length', length);
+                formData.append('depth',  depth);
+                formData.append('unit',   unit);
+                const response = await fetch(IMG2DXF_ENDPOINT, {
+                    method: 'POST',
+                    body: formData
+                });
+                if (!response.ok) {
+                    // Error returned as JSON
+                    const errData = await response.json();
+                    status.textContent = `❌ Error ${response.status}: ${errData.error || 'Unknown error'}`;
+                    return;
+                }
+                // ── Trigger browser download of the DXF blob ───────────────
+                const dxfFilename = response.headers.get('X-DXF-Filename') || 'tool_output.dxf';
+                const blob        = await response.blob();
+                const url         = URL.createObjectURL(blob);
+                const a           = document.createElement('a');
+                a.href            = url;
+                a.download        = dxfFilename;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+                // ── Show preview images if S3 URLs were returned ───────────
+                const origUrl    = response.headers.get('X-Original-Image-URL');
+                const contourUrl = response.headers.get('X-Contour-Image-URL');
+                status.textContent = `✅ DXF downloaded: ${dxfFilename}\n\nOriginal image URL: ${origUrl || '(not available)'}\nContour image URL:  ${contourUrl || '(not available)'}`;
+                if (origUrl || contourUrl) {
+                    if (origUrl)    document.getElementById('previewOriginal').src = origUrl;
+                    if (contourUrl) document.getElementById('previewContour').src  = contourUrl;
+                    document.getElementById('previewSection').style.display = 'block';
+                }
+            } catch (error) {
+                status.textContent = `❌ Request failed: ${error.message}`;
+            } finally {
+                btn.disabled      = false;
+                btnText.innerHTML = '⬇ Convert & Download DXF';
+            }
+        }
+        function clearConvertResponse() {
+            document.getElementById('responseContent').textContent = 'Ready. Select images and click Convert.';
+            document.getElementById('previewSection').style.display = 'none';
+        }
+        // Health check on load and every 30s
+        checkHealth();
+        setInterval(checkHealth, 30000);
+    </script>
+</body>
+</html>