mirror of
https://github.com/KoboldAI/KoboldAI-Client.git
synced 2025-06-05 21:59:24 +02:00
Initial screenshot
This commit is contained in:
somebody
@@ -1199,6 +1199,187 @@ td.server_vars {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
#screenshot-wizard {
|
||||
width: 50%;
|
||||
background-color: var(--background);
|
||||
}
|
||||
|
||||
#screenshot-wizard > .popup-header {
|
||||
padding-top: 5px;
|
||||
padding-left: 5px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
#screenshot-wizard > .help_text {
|
||||
margin-top: 0.7em;
|
||||
}
|
||||
|
||||
#screenshot-wizard > .popup-header > h1 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#screenshot-target-container {
|
||||
position: relative;
|
||||
margin: 20px;
|
||||
margin-top: 10px;
|
||||
max-height: 25vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#screenshot-target {
|
||||
min-height: 130px;
|
||||
background-color: var(--gamescreen_background);
|
||||
padding: 20px;
|
||||
/* width: 1080px; */
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#screenshot-target > #screenshot-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#screenshot-target > #screenshot-images {
|
||||
border-left: 1px solid var(--background);
|
||||
flex-shrink: 0;
|
||||
max-width: 25%;
|
||||
padding-left: 20px;
|
||||
margin-left: 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#screenshot-target > #screenshot-images > img {
|
||||
display: block;
|
||||
width: 100%; /* the buggy line */
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#screenshot-target .action-text {
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.robot-attribution {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
#screenshot-target .human-text,
|
||||
.robot-attribution > .human-attribution {
|
||||
color: var(--text_edit);
|
||||
}
|
||||
|
||||
#screenshot-target .ai-text,
|
||||
.robot-attribution > .model-name {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.robot-attribution > .model-name {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.robot-attribution > .story-attribution {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.robot-attribution > .human-attribution,
|
||||
.robot-attribution > .model-name,
|
||||
.robot-attribution > .story-attribution {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.robot-attribution > .boring-part-of-madlibs {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
#screenshot-options {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
#screenshot-wizard .header {
|
||||
font-weight: bold;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
#screenshot-wizard .option {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
#screenshot-wizard .distribution-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
#screenshot-options .indent {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
#screenshot-options .warning {
|
||||
color: rgb(185, 70, 70);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Screenshot Image Picker */
|
||||
#screenshot-image-picker {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto auto;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
/* TODO: We REALLY need to figure out a better system for colors and themeing */
|
||||
background-color: var(--flyout_background_pinned);
|
||||
}
|
||||
|
||||
#screenshot-image-picker > .img-container {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: 2px solid var(----enabled_button_background_color);
|
||||
}
|
||||
|
||||
#screenshot-image-picker > .img-container > img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 1/1;
|
||||
}
|
||||
|
||||
#screenshot-image-picker > .img-container > input {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#screenshot-image-picker > .img-container > input:checked ~ img {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
#sw-download {
|
||||
margin-top: 12px;
|
||||
margin: 3px;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--button_background);
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#screenshot-text-container {
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
/* ---------------------------- OVERALL PAGE CONFIG ------------------------------*/
|
||||
body {
|
||||
|
||||
@@ -6929,4 +6929,77 @@ $el(".gametext").addEventListener("keydown", function(event) {
|
||||
// contentEditable="plaintext-only" we're just gonna have to roll with it
|
||||
document.execCommand("insertLineBreak");
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
|
||||
/* Screenshot */
|
||||
(function() {
|
||||
const screenshotTarget = $el("#screenshot-target");
|
||||
const screenshotImagePicker = $el("#screenshot-image-picker");
|
||||
const genImgToggle = $el("#sw-gen-img");
|
||||
const attributionToggle = $el("#sw-attribution");
|
||||
const screenshotImageContainer = $el("#screenshot-images");
|
||||
|
||||
// JQuery required for bootstrap toggle events
|
||||
$(genImgToggle).change(function() {
|
||||
screenshotImagePicker.classList.toggle("disabled", !genImgToggle.checked);
|
||||
updateShownImages();
|
||||
});
|
||||
|
||||
$(genImgToggle).bootstrapToggle();
|
||||
|
||||
function showScreenshotWizard() {
|
||||
let imageUrls = [];
|
||||
|
||||
for (let i=1;i<17;i++) {
|
||||
let s = i.toString();
|
||||
if (s.length === 1) s = "0"+s;
|
||||
imageUrls.push(`/static/test/${s}.jpg`);
|
||||
}
|
||||
|
||||
for (const imageSrc of imageUrls) {
|
||||
const imgContainer = $e("div", screenshotImagePicker, {classes: ["img-container"]});
|
||||
const checkbox = $e("input", imgContainer, {type: "checkbox"});
|
||||
const image = $e("img", imgContainer, {src: imageSrc, draggable: false});
|
||||
|
||||
imgContainer.addEventListener("click", function(event) {
|
||||
// TODO: Preventdefault if too many images selected and checked is false
|
||||
checkbox.click();
|
||||
});
|
||||
|
||||
checkbox.addEventListener("click", function(event) {
|
||||
event.stopPropagation();
|
||||
updateShownImages();
|
||||
});
|
||||
}
|
||||
openPopup("screenshot-wizard");
|
||||
}
|
||||
|
||||
function updateShownImages() {
|
||||
screenshotImageContainer.innerHTML = "";
|
||||
if (!genImgToggle.checked) return;
|
||||
|
||||
for (const imgCont of screenshotImagePicker.children) {
|
||||
const checked = imgCont.querySelector("input").checked;
|
||||
if (!checked) continue;
|
||||
const src = imgCont.querySelector("img").src;
|
||||
$e("img", screenshotImageContainer, {src: src});
|
||||
}
|
||||
}
|
||||
|
||||
async function downloadScreenshot() {
|
||||
// TODO: Upscale (eg transform with given ratio like 1.42 to make image
|
||||
// bigger via screenshotTarget cloning)
|
||||
const canvas = await html2canvas(screenshotTarget, {
|
||||
width: screenshotTarget.clientWidth,
|
||||
height: screenshotTarget.clientHeight - 1
|
||||
});
|
||||
|
||||
canvas.style.display = "none";
|
||||
document.body.appendChild(canvas);
|
||||
$e("a", null, {download: "screenshot.png", href: canvas.toDataURL("image/png")}).click();
|
||||
canvas.remove();
|
||||
}
|
||||
$el("#sw-download").addEventListener("click", downloadScreenshot);
|
||||
|
||||
showScreenshotWizard();
|
||||
})();
|
||||
@@ -320,6 +320,83 @@
|
||||
|
||||
<!-- Big Image -->
|
||||
<img id="big-image"></img>
|
||||
|
||||
<!-- Screenshot Wizard -->
|
||||
<div id="screenshot-wizard" class="popup-window">
|
||||
<script src="/static/html2canvas.min.js"></script>
|
||||
<div class="popup-header">
|
||||
<h1>Screenshot</h1>
|
||||
</div>
|
||||
<span class="help_text">
|
||||
This tool is used to create screenshots of story segments that can easily be shared. The options below will help you customize the screenshot to your liking.
|
||||
</span>
|
||||
<div id="screenshot-target-container">
|
||||
<div id="screenshot-target">
|
||||
<div id="screenshot-left">
|
||||
<div id="screenshot-text-container">
|
||||
<span class="action-text human-text">Hellow my name </span>
|
||||
<span class="action-text ai-text">is john kobold i am a kobald from the artic where it is</span>
|
||||
<span class="action-text human-text">very cold</span>
|
||||
<span class="action-text ai-text">oooh brr very chilly!!</span>
|
||||
<span class="action-text human-text">blah blah</span>
|
||||
<span class="action-text ai-text">
|
||||
blah. isn't this engaging?
|
||||
behold the joys and wonders of placeholder text.
|
||||
don't read too much into it, though, or it isn't serving its purpose.
|
||||
perhaps I should have just copied and pasted existing placeholder text here.
|
||||
is it too late for that? let me reload and check. nope, quite a ways to go.
|
||||
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</span>
|
||||
</div>
|
||||
<span class="robot-attribution">
|
||||
<span class="boring-part-of-madlibs">A snippit of</span>
|
||||
<span class="story-attribution">The Great John Koblad</span>,
|
||||
<span class="boring-part-of-madlibs">written by</span>
|
||||
<span class="human-attribution">one-some</span>
|
||||
<span class="boring-part-of-madlibs">in KoboldAI with</span>
|
||||
<span class="model-name">facebook/OPT_175B</span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="screenshot-images"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="screenshot-options">
|
||||
<span class="header">Options</span>
|
||||
<div class="option">
|
||||
Show Attribution
|
||||
<input id="sw-attribution" type="checkbox" data-size="mini" data-onstyle="success" data-toggle="toggle">
|
||||
</div>
|
||||
<div class="indent">
|
||||
<div class="option">Show Story Title <input type="checkbox" data-size="mini" data-onstyle="success" data-toggle="toggle"></div>
|
||||
<div class="option">Show Author Name <input type="checkbox" data-size="mini" data-onstyle="success" data-toggle="toggle"></div>
|
||||
<div class="indent">
|
||||
<div class="option">Author Name <input></div>
|
||||
<span id="option-author-name-too-big" class="hidden warning">Isn't that a bit excessive?</span>
|
||||
</div>
|
||||
<div class="option">Show Model Name <input type="checkbox" data-size="mini" data-onstyle="success" data-toggle="toggle"></div>
|
||||
<div class="option">Boring Colors <input type="checkbox" data-size="mini" data-onstyle="success" data-toggle="toggle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="distribution-bar">
|
||||
<div class="header">Generated Images</div>
|
||||
<div>
|
||||
Enabled
|
||||
<input id="sw-gen-img" type="checkbox" data-size="mini" data-onstyle="success" data-toggle="toggle">
|
||||
</div>
|
||||
</div>
|
||||
<div id="screenshot-image-picker" class="noselect"></div>
|
||||
|
||||
<div id="sw-download">Download Screenshot</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="notification-container"></div>
|
||||
Reference in New Issue
Block a user