index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat Nio Blob Service</title>
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Chat Nio Blob Service">
    <meta name="author" content="Deeptrain Community">
    <meta name="keywords" content="Chat Nio Blob Service">
    <meta name="theme-color" content="#ffffff">
    <meta itemprop="image" content="/favicon.ico">
    <link href="https://open.lightxi.com/fonts/Inter" rel="stylesheet">
    <style>
    html, body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
        background: hsl(var(--background));
        scrollbar-width: none;
    }

    ::-webkit-scrollbar {
        width: 0;
    }

    * {
        box-sizing: border-box;
        outline: none;
        -webkit-tap-highlight-color: transparent;
        -webkit-overflow-scrolling: touch;
        font-family: "Inter",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    }

    :root {
        --background: 0 0% 0%;
        --background-hover: 0 0% 7.8%;
        --background-container: 0, 0%, 7.8%, 0.8;
        --foreground: 210 40% 98%;

        --card: 240 10% 3.9%;
        --card-hover: 240 11% 12.5%;
        --card-active: 240 9.5% 19%;
        --card-foreground: 0 0% 98%;

        --popover: 240 10% 3.9%;
        --popover-foreground: 0 0% 98%;

        --primary: 210 40% 98%;
        --primary-foreground: 222.2 47.4% 11.2%;

        --secondary: 217.2 32.6% 17.5%;
        --secondary-foreground: 210 40% 98%;

        --muted: 240 3.7% 15.9%;
        --muted-foreground: 240 5% 64.9%;

        --accent: 240 3.7% 15.9%;
        --accent-secondary: 240 5% 15.9%;
        --accent-foreground: 0 0% 98%;

        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;

        --border: 240 3.7% 15.9%;
        --border-hover: 240 3.7% 20.9%;
        --border-active: 240 3.7% 25.9%;
        --input: 240 3.7% 15.9%;
        --input-unread: 240 3.7% 50%;
        --ring: 240 4.9% 83.9%;
        --text: 0 0% 100%;
        --text-secondary: 0 0% 80%;
        --shadow: #ffffff05;

        --radius: 0.5rem;
    }

    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-items: center;
    }

    .wrapper {
        width: 80vw;
        max-width: 720px;
        height: max-content;
        margin: auto;
        padding: 2rem;
    }

    .drop-window {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 200px;
        height: 20vh;
        border: 2px dashed hsl(var(--border));
        border-radius: var(--radius);
        transition: .25s;
        margin: 12px 0;
        cursor: pointer;
        color: hsl(var(--text-secondary));
    }

    .drop-label {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .output-text {
        width: 100%;
        min-height: 60px;
        border: 1px solid hsl(var(--border));
        border-radius: var(--radius);
        padding: 1rem;
        margin-top: 1rem;
        text-align: center;
        color: hsl(var(--text-secondary));
        word-break: break-all;
        word-wrap: break-word;
    }

    .model-input {
        width: 100%;
        height: 40px;
        border: 1px solid hsl(var(--border));
        border-radius: var(--radius);
        padding: 0 1rem;
        margin-bottom: 1rem;
        outline: none;
        text-align: center;
        color: hsl(var(--text-secondary));
        background: hsl(var(--background));
    }

    .loading {
        width: 0.75rem;
        height: 0.75rem;
        border-radius: 50%;
        border: 0.1rem solid hsl(var(--text-secondary));
        border-top-color: hsl(var(--background));
        animation: spin 1s linear infinite;
        margin-right: 0.5rem;
        display: inline-block;
    }

    .link {
        position: absolute;
        top: 0;
        right: 0;
        margin: 1.5rem;
        cursor: pointer;
        outline: none;
        text-decoration: none;
    }

    .link svg {
        width: 1.25rem;
        height: 1.25rem;
        color: hsl(var(--text));
    }

    .hidden {
        display: none;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    .param-box {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 1rem;
    }

    .param {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        color: hsl(var(--text-secondary));
        cursor: pointer;
        user-select: none;
    }

    .param label {
        cursor: pointer;
    }

    input[type="checkbox"] {
        position: relative;
        margin-right: 0.25rem;
        cursor: pointer;

        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 1rem;
        height: 1rem;
        border: 1px solid hsl(var(--border));
        border-radius: 0.25rem;
        background: hsl(var(--background));
        transition: .25s;
    }

    input[type="checkbox"]:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0.5rem;
        height: 0.5rem;
        border-radius: 0.125rem;
        background: hsl(var(--background));
        transition: .25s;
    }

    input[type="checkbox"]:checked:after {
        background: hsl(var(--primary));
    }
</style>
</head>
<body>
<a href="https://github.com/Deeptrain-Community/chatnio-blob-service" target="_blank" class="link">
    <svg viewBox="0 0 438.549 438.549">
        <path fill="currentColor" d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"></path>
    </svg>
</a>
<div class="wrapper">
    <label for="file" class="drop-window">
        <input type="file" id="file" style="display: none">
        <span class="drop-label">
            <span class="loading hidden"></span>
            <span class="upload-text">Click to upload a file</span>
            <div class="progress-bar" style="display: none;">
                <div class="progress"></div>
            </div>
        </span>
    </label>
    <div class="param-box">
        <div class="param">
            <input type="checkbox" id="vision" checked>
            <label for="vision">Vision</label>
        </div>
        <div class="param">
            <input type="checkbox" id="ocr">
            <label for="ocr">OCR</label>
        </div>
        <div class="param">
            <input type="checkbox" id="all">
            <label for="all">Save All</label>
        </div>
    </div>
    <div id="output" class="output-text"></div>
</div>
<script>
    const input = document.getElementById('file');
    const output = document.getElementById('output');
    const uploadText = document.querySelector('.upload-text');
    const progressBar = document.querySelector('.progress-bar');
    const progress = document.querySelector('.progress');

    const vision = document.getElementById('vision');
    const ocr = document.getElementById('ocr');
    const all = document.getElementById('all');

    function post(file) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            const formData = new FormData();
            formData.append('file', file);
            formData.append('enable_vision', vision.checked);
            formData.append('enable_ocr', ocr.checked);
            formData.append('save_all', all.checked);

            xhr.open('POST', '/upload', true);

            xhr.upload.onprogress = (progressEvent) => {
                if (progressEvent.lengthComputable) {
                    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
                    console.debug(percentCompleted);
                    updateProgressBar(percentCompleted);
                }
            };

            xhr.onload = function() {
                if (this.status >= 200 && this.status < 300) {
                    try {
                        const data = JSON.parse(xhr.responseText);
                        resolve(data.content || data.error);
                    } catch (e) {
                        reject(new Error('Invalid JSON response'));
                    }
                } else {
                    reject(new Error('HTTP error ' + this.status));
                }
            };

            xhr.onerror = function() {
                reject(new Error('Network error'));
            };

            xhr.send(formData);
        });
    }

    function updateProgressBar(percent) {
        progressBar.style.display = 'block';
        progress.style.width = `${percent}%`;
        uploadText.textContent = `Uploading: ${percent}%`;
    }

    async function handler(file) {
        const loading = document.querySelector('.loading');
        loading.classList.remove('hidden');
        uploadText.textContent = 'Uploading...';
        progressBar.style.display = 'block';
        progress.style.width = '0%';

        const content = await post(file);
        let raw = content.replace(/\\n/g, '\n');
        if (raw.startsWith("data:image") && raw.length > 1000) {
            raw = `${raw.slice(0, 1000)}... (truncated ${raw.length - 1000} characters)`;
        }

        output.innerText = raw;
        loading.classList.add('hidden');
        uploadText.textContent = 'Click to upload a file';
        progressBar.style.display = 'none';
    }

    // input box change event
    input.addEventListener('change', async e => {
        const file = e.target.files[0];
        if (!file) return;

        await handler(file);
        input.value = '';
    });

    // window copy event
    document.body.addEventListener('paste', async e => {
        const file = e.clipboardData.files[0];
        if (!file) return;

        await handler(file);
    });
</script>
</body>
</html>