Hugging Face's logo

Spaces:
dx8152
/
Ai-Studio
Running

App Files Community
Ai-Studio / static /angle.html
dx8152's picture
dx8152
Upload 8 files
e51fed7 verified
raw
history blame contribute delete
55.3 kB
 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/static/logo.png" type="image/png">
<title>Angle Control | 视角重塑</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.160.0/build/three.module.js"
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=JetBrains+Mono:wght@400;700&display=swap');
:root {
--accent: #111827;
--bg: #f9fafb;
--card: #ffffff;
--easing: cubic-bezier(0.4, 0, 0.2, 1);
}
/* --- 极简悬浮浅灰滚动条 (无底色/左移) --- */
*::-webkit-scrollbar {
width: 10px !important;
height: 10px !important;
background: transparent !important;
}
*::-webkit-scrollbar-track {
background: transparent !important;
border: none !important;
}
*::-webkit-scrollbar-thumb {
background-color: #d8d8d8 !important;
border: 3px solid transparent !important;
border-right-width: 5px !important;
/* 增加右侧间距，使滚动条向左位移 */
background-clip: padding-box !important;
border-radius: 10px !important;
}
*::-webkit-scrollbar-thumb:hover {
background-color: #c0c0c0 !important;
}
*::-webkit-scrollbar-corner {
background: transparent !important;
}
* {
scrollbar-width: thin !important;
scrollbar-color: #d8d8d8 transparent !important;
}
body {
background-color: var(--bg);
font-family: 'Inter', -apple-system, sans-serif;
color: var(--accent);
-webkit-font-smoothing: antialiased;
}
.container-box {
max-width: 1280px;
margin: 0 auto;
padding: 0 40px;
margin-top: 50px;
}
/* 统一组件风格 */
.glass-btn {
background: #111827;
transition: all 0.3s var(--easing);
}
.glass-btn:hover {
background: #000;
transform: translateY(-1px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}
.glass-btn:active {
transform: scale(0.98);
}
.upload-item {
background: var(--card);
border: 1px dashed #e2e8f0;
transition: all 0.4s var(--easing);
}
.upload-item:hover {
border-color: #000;
background: #fff;
transform: translateY(-2px);
}
.result-frame {
background: #ffffff;
border-radius: 32px;
border: 1px solid #f1f5f9;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.02);
}
.masonry-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.25rem;
}
@media (min-width: 768px) {
.masonry-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.masonry-item {
aspect-ratio: 1 / 1;
background: #fff;
border: 1px solid #f1f5f9;
border-radius: 24px;
overflow: hidden;
transition: all 0.5s var(--easing);
position: relative;
}
.masonry-item:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.nano-input {
background: #ffffff;
border-radius: 16px;
transition: all 0.3s ease;
border: 1px solid #e5e7eb;
}
.nano-input:focus {
background: #ffffff;
box-shadow: 0 0 0 2px #000;
border-color: transparent;
}
@keyframes b-loading {
0% {
transform: scale(1);
background: #000;
}
50% {
transform: scale(1.15);
background: #444;
}
100% {
transform: scale(1);
background: #000;
}
}
.loading-box {
width: 10px;
height: 10px;
animation: b-loading 1s infinite var(--easing);
}
/* 复合切换组件样式 - 来自 zimage */
.mode-switcher {
position: relative;
background: #f1f1f1;
padding: 4px;
border-radius: 14px;
display: flex;
width: 100%;
}
.mode-btn {
position: relative;
z-index: 10;
flex: 1;
padding: 8px 0;
text-align: center;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
color: #999;
transition: color 0.3s ease;
cursor: pointer;
}
.mode-btn.active {
color: #000;
}
.mode-glider {
position: absolute;
height: calc(100% - 8px);
width: calc(50% - 4px);
background: #fff;
border-radius: 11px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
transition: transform 0.3s var(--easing);
z-index: 1;
}
</style>
</head>
<body class="selection:bg-black selection:text-white">
<div class="container-box">
<header class="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
<div class="space-y-1">
<h1 class="text-4xl font-extrabold tracking-[-0.05em] flex items-center">
ANGLE CONTROL<span class="text-base mt-3 ml-1">®</span>
</h1>
<p class="text-[10px] font-bold uppercase tracking-[0.5em] text-gray-400">Camera & Perspective Control
</p>
</div>
<nav class="flex gap-8 text-[11px] font-bold uppercase tracking-widest text-gray-500">
<span class="text-black border-b-2 border-black pb-1">Angle</span>
</nav>
</header>
<main class="space-y-12">
<!-- Row 1: Upload and 3D Control -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-start">
<section class="group w-full">
<h3 class="text-[9px] font-black uppercase tracking-[0.3em] mb-5 text-gray-400">01. Input Source
</h3>
<div id="dropzone"
class="upload-item relative overflow-hidden rounded-2xl aspect-[4/3] flex flex-col items-center justify-center cursor-pointer">
<input type="file" id="fileInput" class="hidden" accept="image/*">
<div id="uploadContent" class="text-center space-y-4">
<div
class="w-14 h-14 rounded-full border border-gray-200 bg-white flex items-center justify-center mx-auto group-hover:bg-black group-hover:text-white group-hover:border-black transition-all duration-500">
<i data-lucide="arrow-up" class="w-5 h-5"></i>
</div>
<p class="text-[11px] font-bold uppercase tracking-tight">Drop image here</p>
</div>
<img id="previewImg" class="hidden absolute inset-0 w-full h-full object-cover">
<div id="changeOverlay"
class="hidden absolute inset-0 bg-black/10 backdrop-blur-sm items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
<span
class="bg-white px-5 py-2 rounded-full text-[10px] font-bold uppercase tracking-widest shadow-2xl">Change</span>
</div>
</div>
</section>
<section id="cameraControl" class="space-y-6 w-full">
<h3 class="text-[9px] font-black uppercase tracking-[0.3em] text-gray-400">02. Camera Control</h3>
<div
class="w-full aspect-[4/3] flex flex-col md:flex-row bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
<!-- 3D View -->
<div id="threeContainer" class="relative flex-1 bg-[#222] h-full min-h-0"></div>
<!-- Controls -->
<div
class="w-full md:w-64 flex-shrink-0 p-5 flex flex-col justify-center gap-4 border-l border-gray-100 bg-white overflow-y-auto">
<!-- Horizontal -->
<div class="space-y-3">
<div
class="flex justify-between items-center text-[10px] font-bold uppercase tracking-wider text-gray-500">
<div class="flex items-center gap-2">
<i data-lucide="move-horizontal" class="w-3 h-3"></i>
<span>Rotation</span>
</div>
<div class="flex items-center gap-1.5">
<button onclick="resetControl('h')"
class="text-gray-300 hover:text-black transition-colors p-1" title="Reset">
<i data-lucide="rotate-ccw" class="w-3 h-3"></i>
</button>
<div class="flex items-center bg-gray-100 rounded-md px-2">
<input type="number" id="val-horizontal" value="0"
class="w-10 bg-transparent py-1 text-black text-center outline-none border-none p-0 text-[10px] font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
oninput="syncInput('h')">
<span class="text-gray-400 select-none text-[10px]">°</span>
</div>
</div>
</div>
<input type="range" id="rotate-h" min="-90" max="90" value="0"
class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-black">
</div>
<!-- Vertical -->
<div class="space-y-3">
<div
class="flex justify-between items-center text-[10px] font-bold uppercase tracking-wider text-gray-500">
<div class="flex items-center gap-2">
<i data-lucide="move-vertical" class="w-3 h-3"></i>
<span>Pitch</span>
</div>
<div class="flex items-center gap-1.5">
<button onclick="resetControl('v')"
class="text-gray-300 hover:text-black transition-colors p-1" title="Reset">
<i data-lucide="rotate-ccw" class="w-3 h-3"></i>
</button>
<div class="flex items-center bg-gray-100 rounded-md px-2">
<input type="number" id="val-vertical" value="0"
class="w-10 bg-transparent py-1 text-black text-center outline-none border-none p-0 text-[10px] font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
oninput="syncInput('v')">
<span class="text-gray-400 select-none text-[10px]">°</span>
</div>
</div>
</div>
<input type="range" id="rotate-v" min="-90" max="90" value="0"
class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-black">
</div>
<!-- Distance -->
<div class="space-y-3">
<div
class="flex justify-between items-center text-[10px] font-bold uppercase tracking-wider text-gray-500">
<div class="flex items-center gap-2">
<i data-lucide="zoom-in" class="w-3 h-3"></i>
<span>Distance</span>
</div>
<div class="flex items-center gap-1.5">
<button onclick="resetControl('d')"
class="text-gray-300 hover:text-black transition-colors p-1" title="Reset">
<i data-lucide="rotate-ccw" class="w-3 h-3"></i>
</button>
<div class="flex items-center bg-gray-100 rounded-md px-2">
<input type="number" id="val-distance" value="4.0" step="0.1"
class="w-10 bg-transparent py-1 text-black text-center outline-none border-none p-0 text-[10px] font-bold [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
oninput="syncInput('d')">
</div>
</div>
</div>
<input type="range" id="distance" min="0.1" max="8" value="4" step="0.1"
class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-black">
</div>
</div>
</div>
</section>
</div>
<!-- Row 2: Parameters & Result -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 items-stretch">
<section class="flex flex-col space-y-6">
<h3 class="text-[9px] font-black uppercase tracking-[0.3em] text-gray-400">03. Parameters</h3>
<div class="space-y-3 flex-1 flex flex-col">
<div class="flex items-center gap-2 text-gray-800 ml-1">
<i data-lucide="text-quote" class="w-3 h-3"></i>
<span class="text-[10px] font-bold uppercase tracking-widest">Prompt</span>
</div>
<textarea id="promptInput"
class="nano-input w-full flex-1 p-5 text-sm outline-none resize-none placeholder-gray-300"
placeholder="请通过右侧控制器调整，或输入提示词"></textarea>
</div>
<!-- Engine Switcher -->
<div class="mode-switcher">
<div id="modeLocal" class="mode-btn active flex items-center justify-center gap-1.5"
onclick="switchEngine('local')">
<i data-lucide="monitor" class="w-3 h-3"></i>
<span>Local</span>
</div>
<div id="modeCloud" class="mode-btn flex items-center justify-center"
onclick="switchEngine('cloud')">
<img src="/static/modelscope.gif"
class="h-4 object-contain opacity-50 transition-opacity group-hover:opacity-100"
style="filter: grayscale(100%);" id="msLogo">
</div>
<div id="glider" class="mode-glider"></div>
</div>
<button id="genBtn" onclick="handleGenerate()"
class="glass-btn w-full py-5 text-white rounded-xl font-bold text-[11px] uppercase tracking-[0.4em] flex items-center justify-center gap-3 shadow-xl shadow-black/10 disabled:opacity-50 disabled:cursor-not-allowed">
<i data-lucide="zap" id="btnIcon" class="w-4 h-4 text-yellow-400"></i>
<span id="btnText">Generate New Angle</span>
</button>
</section>
<section class="space-y-6 flex flex-col">
<h3 class="text-[9px] font-black uppercase tracking-[0.3em] text-gray-400">04. Result Preview</h3>
<div id="resultBox"
class="result-frame relative aspect-[4/3] w-full flex items-center justify-center overflow-hidden group">
<div id="emptyState" class="text-center space-y-4 opacity-20">
<i data-lucide="camera" class="w-12 h-12 mx-auto stroke-[1px]"></i>
<p class="text-[10px] font-black tracking-[0.5em] uppercase">Canvas Ready</p>
</div>
<div id="loadingState" class="hidden flex flex-col items-center gap-5 w-full max-w-[80%]">
<div class="loading-box"></div>
<p class="text-[10px] font-bold uppercase tracking-[0.4em] animate-pulse">Processing...</p>
<!-- Progress Bar -->
<div id="cloud-progress-container" class="hidden w-full mt-4">
<div class="flex justify-between text-[9px] font-bold text-gray-400 mb-1 uppercase tracking-widest">
<span id="cloud-status-text">Pending...</span>
<span id="cloud-percent">0%</span>
</div>
<div class="w-full bg-gray-100 rounded-full h-1.5 overflow-hidden">
<div id="cloud-progress-bar" class="bg-black h-full rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
</div>
</div>
<div id="textResult"
class="hidden w-full h-full p-12 flex flex-col items-center justify-center text-center space-y-8">
<i data-lucide="terminal" class="w-12 h-12 text-gray-300 mx-auto"></i>
<div class="space-y-4 max-w-md">
<p class="text-[10px] font-bold uppercase tracking-[0.5em] text-gray-400">Generated
Command
</p>
<h2 id="generatedText" class="text-2xl font-bold leading-relaxed text-gray-900"></h2>
</div>
<button onclick="copyText()"
class="px-8 py-3 bg-gray-100 hover:bg-black hover:text-white rounded-full text-[10px] font-bold uppercase tracking-widest transition-all flex items-center gap-2">
<i data-lucide="copy" class="w-3 h-3"></i> Copy
</button>
</div>
<img id="outputImg"
class="hidden w-full h-full object-contain p-8 cursor-zoom-in transition-all duration-700 hover:scale-[1.02]"
onclick="zoomImage()">
<a id="downloadBtn" href="#" download
class="hidden absolute bottom-8 right-8 w-14 h-14 bg-white shadow-2xl rounded-2xl flex items-center justify-center hover:bg-black hover:text-white transition-all duration-500 border border-gray-100">
<i data-lucide="download" class="w-5 h-5"></i>
</a>
</div>
</section>
</div>
</main>
<section class="mt-32">
<div class="flex items-center gap-6 mb-10">
<h2 class="text-[11px] font-black uppercase tracking-[0.5em]">Archive</h2>
<div class="h-px flex-1 bg-black/5"></div>
</div>
<div id="masonry" class="masonry-grid"></div>
<div id="loadMoreTrigger"
class="py-16 text-center opacity-20 text-[10px] font-bold uppercase tracking-widest">
End of Archive
</div>
</section>
</div>
<div id="lightbox" onclick="handleOutsideClick(event)"
class="hidden fixed inset-0 z-50 bg-white/95 backdrop-blur-3xl flex items-center justify-center p-8">
<button onclick="closeLightbox()"
class="absolute top-10 right-10 p-2 hover:rotate-90 transition-transform duration-500">
<i data-lucide="x" class="w-8 h-8"></i>
</button>
<div class="max-w-6xl w-full h-full flex flex-col items-center justify-center">
<div class="relative">
<div id="lightboxRes"
class="absolute top-4 left-4 bg-black/30 backdrop-blur-md border border-white/20 text-white px-3 py-1.5 rounded-full text-[10px] font-medium tracking-wider opacity-0 transition-opacity duration-300 pointer-events-none">
</div>
<img id="lightboxImg" src="" class="hidden max-h-[80vh] rounded-3xl shadow-2xl">
</div>
<div class="mt-8">
<button onclick="downloadLightboxImage()"
class="px-10 py-4 bg-black text-white rounded-full text-[10px] font-black uppercase tracking-widest flex items-center gap-3 shadow-xl">
<i data-lucide="save" class="w-4 h-4"></i> Save Master
</button>
</div>
</div>
</div>
<script type="module">
import * as THREE from 'three';
// Initialize WebSocket Listener for Cloud Progress
window.addEventListener('message', function(event) {
const data = event.data;
if (data && data.type === 'cloud_status') {
updateCloudProgress(data);
}
});
function updateCloudProgress(data) {
const container = document.getElementById('cloud-progress-container');
const statusText = document.getElementById('cloud-status-text');
const progressBar = document.getElementById('cloud-progress-bar');
const percentText = document.getElementById('cloud-percent');
if (!container || !statusText || !progressBar) return;
// Show container if hidden
if (container.classList.contains('hidden')) {
container.classList.remove('hidden');
}
// Update UI
if (data.status) {
// Simplify status text (remove internal details if needed)
let displayStatus = data.status;
if (displayStatus.includes("PENDING")) displayStatus = "Queueing...";
if (displayStatus.includes("RUNNING")) displayStatus = "Generating...";
statusText.innerText = displayStatus;
}
if (typeof data.progress !== 'undefined' && typeof data.total !== 'undefined') {
const percent = Math.min(100, Math.round((data.progress / data.total) * 100));
progressBar.style.width = `${percent}%`;
percentText.innerText = `${percent}%`;
}
}
const container = document.getElementById('threeContainer');
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x222222);
// Camera setup
const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
// Renderer setup
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(container.clientWidth, container.clientHeight);
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
// Objects
const geometry = new THREE.PlaneGeometry(3, 3);
const material = new THREE.MeshStandardMaterial({
color: 0x444444,
side: THREE.DoubleSide
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const gridHelper = new THREE.GridHelper(20, 20, 0x444444, 0x333333);
scene.add(gridHelper);
// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const pointLight = new THREE.DirectionalLight(0xffffff, 1);
pointLight.position.set(5, 10, 7);
scene.add(pointLight);
// Camera Logic
const sliderH = document.getElementById('rotate-h');
const sliderV = document.getElementById('rotate-v');
const sliderD = document.getElementById('distance');
const valH = document.getElementById('val-horizontal');
const valV = document.getElementById('val-vertical');
const valD = document.getElementById('val-distance');
window.updateCamera = function () {
const lon = parseFloat(sliderH.value);
const lat = parseFloat(sliderV.value);
const dist = parseFloat(sliderD.value);
// Sync inputs (avoid overwriting if active)
if (document.activeElement !== valH) valH.value = lon;
if (document.activeElement !== valV) valV.value = lat;
if (document.activeElement !== valD) valD.value = dist.toFixed(1);
const phi = THREE.MathUtils.degToRad(90 - lat);
const theta = THREE.MathUtils.degToRad(lon);
camera.position.x = dist * Math.sin(phi) * Math.sin(theta);
camera.position.y = dist * Math.cos(phi);
camera.position.z = dist * Math.sin(phi) * Math.cos(theta);
camera.lookAt(0, 0, 0);
// Real-time update prompt
updatePromptWithAngle(lon, lat, dist);
}
window.syncInput = (type) => {
if (type === 'h') {
let v = parseFloat(valH.value);
if (!isNaN(v)) sliderH.value = v;
} else if (type === 'v') {
let v = parseFloat(valV.value);
if (!isNaN(v)) sliderV.value = v;
} else if (type === 'd') {
let v = parseFloat(valD.value);
if (!isNaN(v)) sliderD.value = v;
}
window.updateCamera();
};
window.resetControl = (type) => {
if (type === 'h') {
sliderH.value = 0;
valH.value = 0;
} else if (type === 'v') {
sliderV.value = 0;
valV.value = 0;
} else if (type === 'd') {
sliderD.value = 4;
valD.value = 4;
}
window.updateCamera();
};
function updatePromptWithAngle(h, v, d) {
let parts = [];
if (h !== 0) {
const dir = h > 0 ? "向右" : "向左";
parts.push(`${dir}旋转${Math.abs(h)}度`);
}
if (v !== 0) {
const dir = v > 0 ? "俯视" : "仰视";
parts.push(`${dir}${Math.abs(v)}度`);
}
// Distance logic
let lensText = "";
if (d > 4) {
lensText = "使用广角镜头";
} else if (d < 4) {
lensText = "使用特写镜头";
}
// Removed "保持原位" default text to show placeholder
let resultText = "";
if (parts.length > 0) {
resultText = `将相机${parts.join("，")}`;
}
if (lensText) {
resultText += (resultText ? "，" : "将相机") + lensText;
}
const promptInput = document.getElementById('promptInput');
let currentText = promptInput.value;
// Regex to find existing angle command (including lens info)
const regex = /将相机.*?(?=(\n|$))/g;
if (regex.test(currentText)) {
// Replace existing
promptInput.value = currentText.replace(regex, resultText);
} else {
// Append if not exists and resultText is not empty
if (resultText) {
if (currentText.trim()) {
promptInput.value = currentText.trim() + '\n' + resultText;
} else {
promptInput.value = resultText;
}
}
}
}
sliderH.addEventListener('input', window.updateCamera);
sliderV.addEventListener('input', window.updateCamera);
sliderD.addEventListener('input', window.updateCamera);
window.updateCamera();
// Animation Loop
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
// Handle Resize
const resizeObserver = new ResizeObserver(() => {
const w = container.clientWidth;
const h = container.clientHeight;
camera.aspect = w / h;
camera.updateProjectionMatrix();
renderer.setSize(w, h);
});
resizeObserver.observe(container);
// Expose function to update texture
window.update3DTexture = (url) => {
new THREE.TextureLoader().load(url, (texture) => {
texture.colorSpace = THREE.SRGBColorSpace;
// Adjust plane aspect ratio to match image
const imageAspect = texture.image.width / texture.image.height;
cube.scale.set(1, 1 / imageAspect, 1);
if (imageAspect > 1) {
cube.scale.set(1, 1 / imageAspect, 1);
// Reset base scale to 3
cube.geometry.dispose();
cube.geometry = new THREE.PlaneGeometry(3, 3 / imageAspect);
cube.scale.set(1, 1, 1);
} else {
cube.geometry.dispose();
cube.geometry = new THREE.PlaneGeometry(3 * imageAspect, 3);
cube.scale.set(1, 1, 1);
}
cube.material = new THREE.MeshBasicMaterial({
map: texture,
side: THREE.DoubleSide
});
cube.material.needsUpdate = true;
// Show control panel (already visible, but keep logic safe)
document.getElementById('cameraControl').classList.remove('hidden');
// Force resize check after texture load
setTimeout(() => {
const w = container.clientWidth;
const h = container.clientHeight;
camera.aspect = w / h;
camera.updateProjectionMatrix();
renderer.setSize(w, h);
}, 100);
});
};
</script>
<script>
lucide.createIcons();
// --- Engine Switcher Logic (UI Only) ---
let currentEngine = 'local';
const ENGINE_MODE_KEY = 'angle_engine_mode';
window.switchEngine = function(mode) {
currentEngine = mode;
localStorage.setItem(ENGINE_MODE_KEY, mode);
const glider = document.getElementById('glider');
const localBtn = document.getElementById('modeLocal');
const cloudBtn = document.getElementById('modeCloud');
const msLogo = document.getElementById('msLogo');
if (mode === 'local') {
glider.style.transform = 'translateX(0)';
localBtn.classList.add('active');
cloudBtn.classList.remove('active');
if (msLogo) {
msLogo.classList.add('opacity-50');
msLogo.style.filter = 'grayscale(100%)';
}
} else {
glider.style.transform = 'translateX(100%)';
cloudBtn.classList.add('active');
localBtn.classList.remove('active');
if (msLogo) {
msLogo.classList.remove('opacity-50');
msLogo.style.filter = 'none';
}
}
};
function generateUUID() {
if (typeof crypto !== 'undefined' && crypto.randomUUID) {
try { return crypto.randomUUID(); } catch (e) { }
}
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
const CLIENT_ID = localStorage.getItem("client_id") || generateUUID();
localStorage.setItem("client_id", CLIENT_ID);
let uploadedPath = "";
let uploadedFile = null; // Store raw file for cloud upload
let currentResult = null;
let allHistory = [];
let currentIndex = 0;
const PAGE_SIZE = 30;
const dropzone = document.getElementById('dropzone');
const fileInput = document.getElementById('fileInput');
const previewImg = document.getElementById('previewImg');
const promptInput = document.getElementById('promptInput');
dropzone.onclick = () => fileInput.click();
fileInput.onchange = (e) => handleFile(e.target.files[0]);
// Drag and Drop
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
dropzone.classList.add('border-black', 'bg-gray-50');
});
dropzone.addEventListener('dragleave', () => {
dropzone.classList.remove('border-black', 'bg-gray-50');
});
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
dropzone.classList.remove('border-black', 'bg-gray-50');
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
handleFile(e.dataTransfer.files[0]);
}
});
// Paste support
let isHovering = false;
dropzone.addEventListener('mouseenter', () => isHovering = true);
dropzone.addEventListener('mouseleave', () => isHovering = false);
window.addEventListener('paste', (e) => {
if (!isHovering) return;
const items = (e.clipboardData || e.originalEvent.clipboardData).items;
for (let item of items) {
if (item.kind === 'file' && item.type.startsWith('image/')) {
const file = item.getAsFile();
handleFile(file);
break;
}
}
});
async function handleFile(file) {
if (!file) return;
uploadedFile = file; // Store for cloud usage
const btn = document.getElementById('genBtn');
const btnText = document.getElementById('btnText');
btn.disabled = true;
btnText.innerText = "Uploading...";
const reader = new FileReader();
reader.onload = (e) => {
previewImg.src = e.target.result;
previewImg.classList.remove('hidden');
document.getElementById('uploadContent').classList.add('opacity-0');
document.getElementById('changeOverlay').classList.replace('hidden', 'flex');
// Automatically apply to 3D scene
if (window.update3DTexture) {
window.update3DTexture(e.target.result);
}
};
reader.readAsDataURL(file);
const formData = new FormData();
formData.append('files', file);
try {
const res = await fetch('/api/upload', { method: 'POST', body: formData });
const data = await res.json();
uploadedPath = data.files[0].comfy_name;
btn.disabled = false;
btnText.innerText = "Generate New Angle";
} catch (err) {
console.error("Upload error");
btnText.innerText = "Upload Failed";
btn.disabled = false;
}
}
function applyAngleToPrompt() {
const h = parseInt(document.getElementById('rotate-h').value);
const v = parseInt(document.getElementById('rotate-v').value);
let parts = [];
if (h !== 0) {
const dir = h > 0 ? "向右" : "向左";
parts.push(`${dir}旋转${Math.abs(h)}度`);
}
if (v !== 0) {
const dir = v > 0 ? "俯视" : "仰视";
parts.push(`${dir}${Math.abs(v)}度`);
}
if (parts.length === 0) {
parts.push("保持原位");
}
const resultText = `将相机${parts.join("，")}`;
const promptInput = document.getElementById('promptInput');
// Check if there is existing content, if so append new line
if (promptInput.value.trim()) {
promptInput.value += '\n' + resultText;
} else {
promptInput.value = resultText;
}
// Visual feedback
promptInput.style.transition = "0.2s";
promptInput.style.borderColor = "#000";
promptInput.style.boxShadow = "0 0 0 2px rgba(0,0,0,0.1)";
setTimeout(() => {
promptInput.style.borderColor = "";
promptInput.style.boxShadow = "";
}, 500);
}
async function runCloudTask() {
if (!uploadedFile) throw new Error("Please upload an image first");
// Get token from centralized management (Personal -> Global)
let token = localStorage.getItem('modelscope_api_token');
if (!token) {
try {
const res = await fetch('/api/config/token');
if (res.ok) {
const data = await res.json();
if (data.token) token = data.token;
}
} catch (e) {
console.warn("Failed to fetch global token", e);
}
}
if (!token) {
if (window.parent && typeof window.parent.openTokenModal === 'function') {
window.parent.openTokenModal();
// Allow the error to propagate so user sees the message
// const err = new Error("请先点击右上角设置 ModelScope Token");
// err.silent = true;
// throw err;
}
throw new Error("请先点击右上角设置 ModelScope Token");
}
// Convert image to Base64
const toBase64 = file => new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
const dataUri = await toBase64(uploadedFile);
console.log("DataURI generated, length:", dataUri.length);
// Submit task via dedicated Angle endpoint
// Get Client ID from parent if available
let clientId = null;
try {
if (window.parent && window.parent.CID) {
clientId = window.parent.CID;
}
} catch (e) { console.warn("Cannot access parent CID", e); }
const payload = {
"prompt": promptInput.value,
"api_key": token,
"type": "angle",
"model": "Qwen/Qwen-Image-Edit-2511",
"image_urls": [dataUri],
"client_id": clientId
};
// Reset Progress Bar
document.getElementById('cloud-progress-container').classList.add('hidden');
document.getElementById('cloud-progress-bar').style.width = '0%';
document.getElementById('cloud-percent').innerText = '0%';
let response;
try {
response = await fetch('/api/angle/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
} catch (netErr) {
throw new Error(`Network Error: ${netErr.message}`);
}
// Handle Timeout / Continue Loop
while (response.ok) {
const data = await response.json();
// If success with URL
if (data.url) {
return { images: [data.url] };
}
// If timeout status, ask user
if (data.status === 'timeout') {
const taskId = data.task_id;
const userContinue = confirm("Cloud generation is taking longer than expected (300s). The queue might be full.\n\nDo you want to continue waiting?");
if (userContinue) {
// Call poll endpoint
const pollPayload = {
"task_id": taskId,
"api_key": token,
"client_id": clientId
};
// Update UI to show we are still waiting
updateCloudProgress({status: "Resuming...", progress: 0, total: 150});
response = await fetch('/api/angle/poll_status', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(pollPayload)
});
continue; // Loop back to check response
} else {
throw new Error("User cancelled waiting.");
}
}
// Unknown success response
throw new Error("Unknown response format");
}
if (!response.ok) {
const errText = await response.text();
// Try to parse JSON error if possible
try {
const errJson = JSON.parse(errText);
if (errJson.detail) throw new Error(errJson.detail);
} catch (e) {}
throw new Error(`Generation Failed: ${errText}`);
}
const data = await response.json();
if (data.url) {
return {
images: [data.url]
};
} else {
throw new Error("No image URL in response");
}
}
async function handleGenerate() {
if (!uploadedPath && currentEngine === 'local') {
// ... existing local check ...
const dropzone = document.getElementById('dropzone');
dropzone.style.transition = "0.2s";
dropzone.style.borderColor = "#ef4444";
dropzone.style.transform = "scale(0.98)";
setTimeout(() => {
dropzone.style.borderColor = "";
dropzone.style.transform = "scale(1)";
}, 300);
return;
}
if (!uploadedFile && currentEngine === 'cloud') {
alert("Please upload an image first");
return;
}
// Allow manual prompt even if angle not applied, but require prompt input
if (!promptInput.value.trim()) {
promptInput.style.transition = "0.2s";
promptInput.style.borderColor = "#ef4444";
setTimeout(() => {
promptInput.style.borderColor = "";
}, 300);
return;
}
const btn = document.getElementById('genBtn');
const btnText = document.getElementById('btnText');
btn.disabled = true;
btn.style.backgroundColor = '#333';
btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400 fill-yellow-400 animate-pulse"></i><span class="tracking-[0.4em] text-[11px] uppercase">Processing...</span>`;
lucide.createIcons();
document.getElementById('emptyState').classList.add('hidden');
document.getElementById('outputImg').classList.add('hidden');
document.getElementById('textResult').classList.add('hidden'); // Ensure text result is hidden
document.getElementById('loadingState').classList.remove('hidden');
try {
let data;
if (currentEngine === 'cloud') {
// Cloud Logic
data = await runCloudTask();
} else {
// Local Logic
const seed = Math.floor(Math.random() * 1000000000000000);
const res = await fetch('/api/generate', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
workflow_json: "2511.json",
params: {
"31": { "image": uploadedPath },
"11": { "prompt": promptInput.value },
"14": { "seed": seed }
},
type: "angle",
client_id: CLIENT_ID
})
});
data = await res.json();
if (data.error) throw new Error(data.error);
if (!data.images?.length) throw new Error("No images returned");
}
currentResult = data;
const outputImg = document.getElementById('outputImg');
const downloadBtn = document.getElementById('downloadBtn');
outputImg.src = data.images[0];
outputImg.classList.remove('hidden');
document.getElementById('loadingState').classList.add('hidden');
downloadBtn.href = data.images[0];
downloadBtn.classList.remove('hidden');
downloadBtn.download = `Angle-${Date.now()}.png`;
btn.style.backgroundColor = '';
btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400"></i><span id="btnText">Generate New Angle</span>`;
btn.disabled = false;
lucide.createIcons();
// Add to history
renderImageCard({
images: data.images,
prompt: promptInput.value,
timestamp: Date.now(),
is_cloud: (currentEngine === 'cloud')
}, true);
} catch (err) {
console.error(err);
btn.style.backgroundColor = '';
btn.innerHTML = `<i data-lucide="zap" class="w-4 h-4 text-yellow-400"></i><span id="btnText">Generation Failed</span>`;
lucide.createIcons();
document.getElementById('loadingState').classList.add('hidden');
document.getElementById('emptyState').classList.remove('hidden');
btn.disabled = false;
if (!err.silent) {
alert(err.message);
}
}
}
window.copyText = () => {
const text = document.getElementById('generatedText').innerText;
navigator.clipboard.writeText(text).then(() => {
const btn = document.querySelector('#textResult button');
const originalHTML = btn.innerHTML;
btn.innerHTML = `<i data-lucide="check" class="w-3 h-3"></i> Copied`;
setTimeout(() => {
btn.innerHTML = originalHTML;
lucide.createIcons();
}, 2000);
});
};
// History Management
function renderImageCard(data, isNew = false) {
const masonry = document.getElementById('masonry');
const imgUrl = data.images ? data.images[0] : '';
if (!imgUrl) return;
const card = document.createElement('div');
card.className = "masonry-item relative group cursor-pointer";
card.onclick = () => openLightbox(imgUrl);
// ModelScope Badge
const isCloud = data.is_cloud || (imgUrl && imgUrl.includes('cloud_angle'));
const badgeHtml = isCloud ? `
<div class="absolute top-3 left-3 z-10">
<img src="/static/modelscope.gif" class="h-4 w-auto object-contain bg-white/90 rounded-full p-0.5 shadow-sm">
</div>
` : '';
card.innerHTML = `
<img src="${imgUrl}" class="w-full h-full object-cover block transform group-hover:scale-105 transition-transform duration-[1.5s]">
${badgeHtml}
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-all duration-300 p-6 flex flex-col justify-end pointer-events-none">
<p class="text-white text-[10px] font-bold uppercase tracking-widest line-clamp-2">${data.prompt || "Angle Control"}</p>
</div>
`;
if (isNew) masonry.prepend(card);
else masonry.appendChild(card);
}
function loadNextPage() {
const batch = allHistory.slice(currentIndex, currentIndex + PAGE_SIZE);
if (batch.length === 0) {
const el = document.getElementById('loadMoreTrigger');
if (el) el.innerText = "End of Archive";
return;
}
batch.forEach(item => renderImageCard(item, false));
currentIndex += PAGE_SIZE;
}
async function loadHistory() {
try {
const res = await fetch('/api/history?type=angle');
const history = await res.json();
if (history && Array.isArray(history)) {
allHistory = history;
document.getElementById('masonry').innerHTML = '';
currentIndex = 0;
loadNextPage();
}
} catch (e) { console.error(e); }
}
// Lightbox
function openLightbox(url) {
const img = document.getElementById('lightboxImg');
const resPill = document.getElementById('lightboxRes');
resPill.style.opacity = '0';
img.src = url;
const lb = document.getElementById('lightbox');
lb.classList.replace('hidden', 'flex');
img.classList.remove('hidden');
document.body.style.overflow = 'hidden';
const updateRes = () => {
if (img.naturalWidth) {
resPill.innerText = `${img.naturalWidth} x ${img.naturalHeight}`;
resPill.style.opacity = '1';
}
};
img.onload = updateRes;
if (img.complete) updateRes();
}
function closeLightbox() {
const lb = document.getElementById('lightbox');
lb.classList.replace('flex', 'hidden');
document.body.style.overflow = 'auto';
}
function handleOutsideClick(e) {
if (e.target.id === 'lightbox') closeLightbox();
}
function downloadLightboxImage() {
const imgUrl = document.getElementById('lightboxImg').src;
const link = document.createElement('a');
link.href = imgUrl;
link.download = `Angle-Master-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
function zoomImage() {
if (currentResult && currentResult.images && currentResult.images[0]) {
openLightbox(currentResult.images[0]);
}
}
// Init
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && allHistory.length > 0) {
loadNextPage();
}
}, { threshold: 0.1 });
window.onload = () => {
// Restore engine mode
const savedMode = localStorage.getItem(ENGINE_MODE_KEY);
if (savedMode && (savedMode === 'local' || savedMode === 'cloud')) {
switchEngine(savedMode);
}
loadHistory();
observer.observe(document.getElementById('loadMoreTrigger'));
};
// WebSocket for real-time updates (optional but good for multi-tab sync)
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = `${wsProtocol}//${window.location.host}/ws/stats?client_id=${CLIENT_ID}`;
const socket = new WebSocket(wsUrl);
socket.onopen = () => {
setInterval(() => {
if (socket.readyState === WebSocket.OPEN) socket.send("ping");
}, 30000);
};
</script>
</body>
</html>