/ var / www / html / bioautomyze / [ HOME SHELL ]

Name	Size	Permission	Action
chat.html	680 B	-rw-r--r--
index.html	13.56 KB	-rw-r--r--

Code Editor : index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>BioAutoCon</title>

header {
            text-align: center;
            padding: 60px 20px 40px;
        }

header h1 {
            font-size: 58px;
            font-family: serif;
            margin-bottom: 16px;
            letter-spacing: -1px;
        }

header p {
            color: #555;
            font-size: 20px;
            margin-bottom: 16px;
        }

.center-line {
            width: 60px;
            height: 3px;
            margin: 0 auto;
            background: #0090ff;
            border-radius: 6px;
        }

.container {
            width: 900px;
            max-width: 95%;
            margin: 0 auto 100px;
        }

/* Card */
        .card {
            background: #fff;
            border-radius: 22px;
            padding: 40px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
            margin-bottom: 40px;
        }

.card h2 {
            font-size: 28px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: serif;
        }

/* Upload wrapper */
        .upload-wrapper {
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 20px;
            padding: 24px;
            background: linear-gradient(to bottom right, #fff, #faf3e6);
        }

.upload-area {
            background: #f7f2e9;
            border-radius: 20px;
            border: 2px dashed rgba(0, 0, 0, 0.12);
            padding: 80px 20px;
            text-align: center;
            cursor: pointer;
            transition: 0.2s;
        }

.upload-area:hover {
            background: #f7f2e9;
        }

.upload-icon {
            font-size: 80px;
            margin-bottom: 20px;
            animation: pulse 2s infinite ease-in-out;
        }

@keyframes pulse {

0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

50% {
                opacity: .7;
                transform: scale(1.05);
            }
        }

.upload-area p {
            margin: 4px 0;
            font-size: 18px;
            color: #444;
        }

.upload-small {
            font-size: 14px;
            color: #888;
            margin-top: 10px;
        }

.hidden-input {
            display: none;
        }

/* Chat */
        #chat {
            border-radius: 16px;
            background: #fff;
            border: 1px solid rgba(0, 0, 0, 0.1);
            padding: 20px;
            height: 350px;
            overflow-y: auto;
        }

.context-card {
            display: flex;
            gap: 18px;
            background: linear-gradient(to right, #faf3e6, #f7f2e9);
            padding: 18px;
            border-radius: 16px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
            align-items: center;
        }

.context-card img {
            width: 120px;
            height: 120px;
            object-fit: cover;
            border-radius: 14px;
            border: 2px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
            cursor: pointer;
        }

.context-card-title {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 4px;
        }

.context-small {
            color: #666;
            font-size: 14px;
        }

.context-buttons button {
            padding: 6px 12px;
            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, 0.12);
            background: white;
            cursor: pointer;
            font-size: 14px;
            margin-right: 6px;
        }

.context-buttons button:hover {
            background: rgba(0, 0, 0, 0.05);
        }

.placeholder-box {
            text-align: center;
            padding-top: 40px;
            color: #555;
        }

.placeholder-box img {
            width: 90px;
            margin-bottom: 20px;
        }

.input-area {
            display: flex;
            gap: 8px;
            margin-top: 20px;
        }

input[type="text"] {
            flex: 1;
            padding: 12px 16px;
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            font-size: 15px;
        }

input[type="text"]:disabled {
            background: #eee;
            cursor: not-allowed;
        }

button.send {
            padding: 12px 30px;
            border-radius: 12px;
            background: #0090ff;
            border: none;
            color: #fff;
            cursor: pointer;
            font-size: 16px;
        }

button.send:disabled {
            background: #94c8ff;
            cursor: not-allowed;
        }

.dot {
            height: 8px;
            width: 8px;
            margin: 0 3px;
            background-color: #0090ff;
            border-radius: 50%;
            display: inline-block;
            animation: blink 1.4s infinite both;
        }

.dot:nth-child(2) {
            animation-delay: .2s;
        }

.dot:nth-child(3) {
            animation-delay: .4s;
        }

@keyframes blink {

0%,
            80%,
            100% {
                opacity: .2;
            }

40% {
                opacity: 1;
            }
        }

.msg {
            margin: 6px 0;
            font-size: 15px;
            line-height: 1.3;
            background: #fff;
            padding: 10px 14px;
            border-radius: 14px;
            display: inline-block;
            max-width: 70%;
            clear: both;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
        }

.user {
            background: linear-gradient(135deg, #0090ff, #005bbb);
            color: white;
            float: right;
        }

.bot {
            background: #f5f5f5;
            float: left;
            color: #333;
        }
    </style>
</head>

<body>

<header>
        <h1>BioAutoCon</h1>
        <p>An ultimate place where you can analyze your network</p>
        <div class="center-line"></div>
    </header>

<div class="card">
            <h2>📷 Upload Network Image</h2>

<div class="upload-wrapper" id="uploadWrapper">
                <div class="upload-area" id="uploadArea" onclick="imgInput.click()">
                    <div class="upload-icon">📁</div>
                    <p><b>Upload your network image</b></p>
                    <p>Click here or drag and drop your biological network image</p>
                    <p class="upload-small">Supports PNG, JPG, GIF up to 10MB</p>
                </div>
            </div>
            <input type="file" id="imgInput" class="hidden-input" accept="image/*">
        </div>

<div class="card">
            <h2>💬 Network Analysis Chat</h2>

<div id="chat">
                <div class="placeholder-box" id="emptyMessage">
                    <img src="https://cdn-icons-png.flaticon.com/512/4712/4712106.png" />
                    <h3>Ready to analyze your network</h3>
                    <p>Upload a network image and ask questions about its structure</p>
                </div>

<div id="contextCard"></div>

<div id="messages"></div>
            </div>

<div class="input-area">
                <input type="text" id="msg" placeholder="Ask about network structure, components, pathways..." />
                <button class="send" onclick="send()" id="sendBtn">Analyze</button>
            </div>
        </div>

</div>

const imgInput = document.getElementById("imgInput");
        const uploadWrapper = document.getElementById("uploadWrapper");
        const uploadArea = document.getElementById("uploadArea");
        const msgInput = document.getElementById("msg");
        const sendBtn = document.getElementById("sendBtn");
        const contextCard = document.getElementById("contextCard");
        const messagesDiv = document.getElementById("messages");

imgInput.addEventListener("change", () => {
            const file = imgInput.files[0];
            if (!file) return;

// Clear previous chat
            messagesDiv.innerHTML = "";
            document.getElementById("emptyMessage")?.remove();

currentImage = file;
            const imgURL = URL.createObjectURL(file);

// Hide upload area
            uploadWrapper.innerHTML = `
      <div class="context-card">
        <img src="${imgURL}">
        <div>
          <div class="context-card-title">${file.name}</div>
          <div class="context-small">Image context active • Ask anything</div>
          <div class="context-buttons" style="margin-top:8px;">
            <button onclick="removeImage()">Remove</button>
            <button onclick="replaceImage()">Replace</button>
          </div>
        </div>
      </div>
    `;

// show context inside chat
            contextCard.innerHTML = `
      <div class="context-card">
        <img src="${imgURL}">
        <div>
          <div class="context-card-title">${file.name}</div>
          <div class="context-small">Image context active • Ask anything</div>
          <div class="context-buttons" style="margin-top:8px;">
            <button onclick="removeImage()">Remove</button>
            <button onclick="replaceImage()">Replace</button>
          </div>
        </div>
      </div>
    `;

msgInput.disabled = false;
            sendBtn.disabled = false;
            msgInput.placeholder = "Ask about network structure, components, pathways...";
        });

function removeImage() {
            currentImage = null;
            imgInput.value = "";
            contextCard.innerHTML = "";
            messagesDiv.innerHTML = "";

uploadWrapper.innerHTML = "";
            uploadWrapper.appendChild(uploadArea);

msgInput.disabled = false;
            sendBtn.disabled = false;
            msgInput.placeholder = "Ask about network structure, components, pathways...";

const ph = document.createElement("div");
            ph.className = "placeholder-box";
            ph.id = "emptyMessage";
            ph.innerHTML = `
      <img src="https://cdn-icons-png.flaticon.com/512/4712/4712106.png" />
      <h3>Ready to analyze your network</h3>
      <p>Upload a network image and ask questions about its structure</p>
    `;
            document.getElementById("chat").prepend(ph);
        }

function replaceImage() {
            imgInput.click();
        }

async function send() {
            let message = msgInput.value.trim();
            if (!message) return;

append("user", message);
            msgInput.value = "";
            msgInput.focus();

// show loading bubble
            showLoading();

let formData = new FormData();
            formData.append("message", message);

if (currentImage) {
                formData.append("file", currentImage);
            }

try {
                const res = await fetch("/api/chat", {
                    method: "POST",
                    body: formData
                });

const data = await res.json();

// remove loading bubble
                document.getElementById("loadingBubble")?.remove();

if (!data.reply) {
                    showError();
                } else {
                    append("bot", data.reply);
                }

} catch (e) {
                document.getElementById("loadingBubble")?.remove();
                showError();
            }
        }

function showLoading() {
            const div = document.createElement("div");
            div.className = "msg bot";
            div.id = "loadingBubble";
            div.innerHTML = `
            <span class="dot"></span>
            <span class="dot"></span>
            <span class="dot"></span>
            `;
            messagesDiv.appendChild(div);
            document.getElementById("chat").scrollTop =
                document.getElementById("chat").scrollHeight;
        }

function showError() {
            const div = document.createElement("div");
            div.className = "msg bot";
            div.innerText = "Sorry, I couldn't process that. Try again?";
            messagesDiv.appendChild(div);
            document.getElementById("chat").scrollTop =
                document.getElementById("chat").scrollHeight;
        }

function append(sender, text) {
            document.getElementById("emptyMessage")?.remove();

const div = document.createElement("div");
            div.className = "msg " + sender;
            div.innerText = text;
            messagesDiv.appendChild(div);
            document.getElementById("chat").scrollTop =
                document.getElementById("chat").scrollHeight;
        }

msgInput.addEventListener("keydown", function (e) {
            if (e.key === "Enter") {
                e.preventDefault();
                send();
            }
        });

</script>

</body>

</html>

Urban Research Lab

The Urban Research Lab (URL) at IIIT-Delhi was established in 2020, during a time when the pandemic brought the complexities of urban life more visible than ever. What started as an initiative by faculty and students has grown into a collaborative space for critically exploring and reimagining the urban questions through research, dialogue, and interdisciplinary engagement.

${this.title}

Code Editor : index.html

Urban Research Lab