171 lines
9.6 KiB
HTML
171 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Metadata Extractor</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="./css/styles.css">
|
|
<link rel="icon" href="./img/favicon.ico" type="image/x-icon">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="main-flex">
|
|
<!-- Left: Image Metadata Extractor -->
|
|
<div class="container">
|
|
<div class="theme-toggle-container">
|
|
<button title="Toggle dark/light mode" id="theme-toggle" class="theme-toggle-btn" aria-label="Toggle dark/light mode">
|
|
<svg class="theme-icon sun-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="5"></circle>
|
|
<line x1="12" y1="1" x2="12" y2="3"></line>
|
|
<line x1="12" y1="21" x2="12" y2="23"></line>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
|
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
|
<line x1="1" y1="12" x2="3" y2="12"></line>
|
|
<line x1="21" y1="12" x2="23" y2="12"></line>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
|
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
|
</svg>
|
|
<svg class="theme-icon moon-icon" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" style="display:none;">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<h1><img src="./img/logo.png"> Metadata Extractor</h1>
|
|
<div id="upload-area" class="upload-area" tabindex="0"
|
|
aria-label="Image upload area. Click or drag and drop an image here.">
|
|
<span id="upload-area-text">Click or drag and drop an image here.</span>
|
|
<br>
|
|
<span id="upload-desc">(.JPG, .PNG or .WEBP)</span>
|
|
<input type="file" id="image-input" accept="image/*" aria-label="Select image file">
|
|
</div>
|
|
<button id="strip-metadata-btn">Strip Metadata</button>
|
|
<h2>Preview:</h2>
|
|
<img id="image-preview" src="" alt="Image Preview" style="display:none;">
|
|
<section id="metadata">
|
|
<h2>Image Info:</h2>
|
|
<ul class="metadata-list" id="metadata-list">
|
|
<!-- Metadata will be displayed here -->
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
<!-- Right: Prompt Info -->
|
|
<div class="prompt-container">
|
|
<h1>Prompt Info</h1>
|
|
<div class="prompt-group">
|
|
<div class="copy-row">
|
|
<label for="positive-prompt">Positive Prompt:</label>
|
|
<button type="button" class="copy-btn" data-target="positive-prompt" title="Copy Positive Prompt"
|
|
aria-label="Copy Positive Prompt">
|
|
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" style="vertical-align:middle;">
|
|
<rect x="6" y="6" width="10" height="12" rx="2" stroke="#888" stroke-width="2"
|
|
fill="none" />
|
|
<rect x="2" y="2" width="10" height="12" rx="2" stroke="#888" stroke-width="2"
|
|
fill="none" />
|
|
</svg>
|
|
</button>
|
|
<label class="btn-label"></label>
|
|
</div>
|
|
<textarea id="positive-prompt" rows="4" placeholder="Enter positive prompt..."></textarea>
|
|
</div>
|
|
<div class="prompt-group">
|
|
<div class="copy-row">
|
|
<label for="negative-prompt">Negative Prompt:</label>
|
|
<button type="button" class="copy-btn" data-target="negative-prompt" title="Copy Negative Prompt"
|
|
aria-label="Copy Negative Prompt">
|
|
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" style="vertical-align:middle;">
|
|
<rect x="6" y="6" width="10" height="12" rx="2" stroke="#888" stroke-width="2"
|
|
fill="none" />
|
|
<rect x="2" y="2" width="10" height="12" rx="2" stroke="#888" stroke-width="2"
|
|
fill="none" />
|
|
</svg>
|
|
</button>
|
|
<label class="btn-label"></label>
|
|
</div>
|
|
<textarea id="negative-prompt" rows="4" placeholder="Enter negative prompt..."></textarea>
|
|
</div>
|
|
<div class="prompt-group">
|
|
<div class="copy-row">
|
|
<label for="additional-prompts">Additional Prompts:</label>
|
|
<button type="button" class="copy-btn" data-target="additional-prompts"
|
|
title="Copy Additional Prompts" aria-label="Copy Additional Prompts">
|
|
<svg width="18" height="18" viewBox="0 0 20 20" fill="none" style="vertical-align:middle;">
|
|
<rect x="6" y="6" width="10" height="12" rx="2" stroke="#888" stroke-width="2"
|
|
fill="none" />
|
|
<rect x="2" y="2" width="10" height="12" rx="2" stroke="#888" stroke-width="2"
|
|
fill="none" />
|
|
</svg>
|
|
</button>
|
|
<label class="btn-label"></label>
|
|
</div>
|
|
<textarea id="additional-prompts" rows="4" placeholder="Enter additional prompts..."></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="additional-container">
|
|
<div class="civitai-toggle-container">
|
|
<button type="button" id="civitai-toggle" class="civitai-toggle-btn" aria-label="Toggle Civitai model lookup"
|
|
title="Toggle Civitai model lookup: fetch model names and linkify.">
|
|
<svg class="civitai-icon civitai-icon-on" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
|
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
|
</svg>
|
|
<svg class="civitai-icon civitai-icon-off" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none;">
|
|
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
|
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
|
|
<line x1="2" y1="2" x2="22" y2="22"></line>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<h1>Models:</h1>
|
|
<span id="warning"></span>
|
|
<ul class="model-info-list" id="model-info-list">
|
|
<!-- Metadata will be displayed here -->
|
|
</ul>
|
|
<h1>Additional Info:</h1>
|
|
<div class="expand-toggle-row" id="additional-info-toggle-row">
|
|
<svg class="chevron chevron-left" width="24" height="24" viewBox="0 0 24 24">
|
|
<polyline points="10 8 14 12 10 16" fill="none" stroke="#888" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
<span class="expand-toggle-text" id="additional-info-toggle-text" tabindex="0" role="button"
|
|
aria-expanded="false">
|
|
Show additional info
|
|
</span>
|
|
<svg class="chevron chevron-right" width="24" height="24" viewBox="0 0 24 24">
|
|
<polyline points="14 8 10 12 14 16" fill="none" stroke="#888" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</div>
|
|
<ul class="prompt-info-list collapsed" id="prompt-info-list">
|
|
<!-- Code blocks and other additional info appended here by script -->
|
|
</ul>
|
|
<template id="metadata-code-block-template">
|
|
<li class="metadata-code-block">
|
|
<div class="expand-toggle-row metadata-code-block-toggle" tabindex="0" role="button" aria-expanded="false">
|
|
<span class="expand-toggle-text metadata-code-block-label">
|
|
<span class="metadata-code-block-label-text"></span>
|
|
<svg class="chevron chevron-left" width="24" height="24" viewBox="0 0 24 24">
|
|
<polyline points="10 8 14 12 10 16" fill="none" stroke="#888" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="metadata-code-block-content collapsed">
|
|
<pre></pre>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<footer class="footer">
|
|
<span>
|
|
Made by otacoo — v1.2.3 —
|
|
<a href="https://github.com/otacoo/comfyui_metadata_extract" target="_blank" rel="noopener noreferrer">GitHub</a>
|
|
</span>
|
|
</footer>
|
|
<script src="./js/script.js"></script>
|
|
</body>
|
|
|
|
</html> |