[FE] splits feeling lucky with history, adds nav bar
This commit is contained in:
parent
f997e7ecf3
commit
c9b0dcdc50
|
|
@ -12,10 +12,47 @@
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<a class="navbar-brand" href="#">{{ config.TITLE }}</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
|
||||||
|
aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||||
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" data-en_XX="Home" data-zh_CN="主页">Home</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" data-en_XX="Help" data-zh_CN="帮助">Help</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" data-en_XX="About" data-zh_CN="关于">About</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="input-group">
|
||||||
|
<label class="input-group-text" for="language" data-en_XX="Language"
|
||||||
|
data-zh_CN="语言">Language</label>
|
||||||
|
<select class="form-select" id="language">
|
||||||
|
<option value="zh_CN">中文</option>
|
||||||
|
<option selected value="en_XX">English</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
<div class="card mb-3">
|
<div class="card mb-3">
|
||||||
|
<div class="card-header">
|
||||||
|
<span>Stable Diffusion</span>
|
||||||
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-8 mb-3">
|
<div class="col mb-3">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
<label for="apiKey" class="input-group-text" data-en_XX="API Key" data-zh_CN="API 密钥">API
|
<label for="apiKey" class="input-group-text" data-en_XX="API Key" data-zh_CN="API 密钥">API
|
||||||
Key</label>
|
Key</label>
|
||||||
|
|
@ -27,16 +64,6 @@
|
||||||
data-zh_CN="生成非公开图片">Generate Private Images</label>
|
data-zh_CN="生成非公开图片">Generate Private Images</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-4 mb-3">
|
|
||||||
<div class="input-group">
|
|
||||||
<label class="input-group-text" for="language" data-en_XX="Language"
|
|
||||||
data-zh_CN="语言">Language</label>
|
|
||||||
<select class="form-select" id="language">
|
|
||||||
<option value="zh_CN">中文</option>
|
|
||||||
<option selected value="en_XX">English</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row mb-3">
|
<div class="row mb-3">
|
||||||
<div class="input-group">
|
<div class="input-group">
|
||||||
|
|
@ -113,7 +140,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="stable-diffusion card-header">
|
||||||
<ul class="nav nav-pills card-header-pills">
|
<ul class="nav nav-pills card-header-pills">
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<a class="nav-link" href="#card-txt" data-en_XX="Text-to-Image"
|
<a class="nav-link" href="#card-txt" data-en_XX="Text-to-Image"
|
||||||
|
|
@ -129,7 +156,7 @@
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body card-specific" id="card-img" style="display:none">
|
<div class="card-body stable-diffusion-specific" id="card-img" style="display:none">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
|
@ -204,7 +231,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body card-specific" id="card-inpainting" style="display:none">
|
<div class="card-body stable-diffusion-specific" id="card-inpainting" style="display:none">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
|
@ -295,7 +322,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body card-specific" id="card-txt" style="display:none">
|
<div class="card-body stable-diffusion-specific" id="card-txt" style="display:none">
|
||||||
<div class="row mb-3">
|
<div class="row mb-3">
|
||||||
<div class="col-md-4">
|
<div class="col-md-4">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
|
|
@ -347,9 +374,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="card mb-3">
|
||||||
<div class="card">
|
<div class="card-header">
|
||||||
<div class="card-header" data-en_XX="History" data-zh_CN="历史">History</div>
|
<span data-en_XX="History" data-zh_CN="历史">History</span>
|
||||||
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<div class="input-group mb-3">
|
<div class="input-group mb-3">
|
||||||
<label for="lookupUUID" class="input-group-text" data-en_XX="UUID (Optional)"
|
<label for="lookupUUID" class="input-group-text" data-en_XX="UUID (Optional)"
|
||||||
|
|
@ -357,12 +385,22 @@
|
||||||
<input type="text" class="form-control" id="lookupUUID" value="">
|
<input type="text" class="form-control" id="lookupUUID" value="">
|
||||||
<button id="getJobHistory" class="btn btn-primary" data-en_XX="Get Job(s)" data-zh_CN="搜索历史">Get
|
<button id="getJobHistory" class="btn btn-primary" data-en_XX="Get Job(s)" data-zh_CN="搜索历史">Get
|
||||||
Job(s)</button>
|
Job(s)</button>
|
||||||
<button id="feelingLucky" class="btn btn-outline-secondary" data-en_XX="I'm Feeling Lucky"
|
|
||||||
data-zh_CN="看看别人的结果">I'm Feeling Lucky</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="joblist"></div>
|
<div id="joblist"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="card mb-3">
|
||||||
|
<div class="card-header d-flex justify-content-between align-items-center">
|
||||||
|
<span data-en_XX="Get Inspirations from Others" data-zh_CN="从别人那里找灵感">Get Inspirations from
|
||||||
|
Others</span>
|
||||||
|
<button id="feelingLucky" class="btn btn-outline-secondary" data-en_XX="Change a batch"
|
||||||
|
data-zh_CN="换一批">Change a batch</button>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div id="othersJobList"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- CSS code -->
|
<!-- CSS code -->
|
||||||
|
|
@ -530,7 +568,7 @@
|
||||||
top: clickedPosition.top,
|
top: clickedPosition.top,
|
||||||
left: clickedPosition.left
|
left: clickedPosition.left
|
||||||
}).animate({
|
}).animate({
|
||||||
top: input.offset().top ,
|
top: input.offset().top,
|
||||||
left: input.offset().left,
|
left: input.offset().left,
|
||||||
opacity: 0
|
opacity: 0
|
||||||
}, 500, function () {
|
}, 500, function () {
|
||||||
|
|
@ -662,11 +700,11 @@
|
||||||
success: function (response) {
|
success: function (response) {
|
||||||
var jobsLength = response.jobs.length;
|
var jobsLength = response.jobs.length;
|
||||||
if (jobsLength == 0) {
|
if (jobsLength == 0) {
|
||||||
$('#joblist').html("found nothing");
|
$('#othersJobList').html("found nothing");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
var $joblist = $('#joblist');
|
var $joblist = $('#othersJobList');
|
||||||
var $grid = $('<div class="row"></div>');
|
var $grid = $('<div class="row"></div>');
|
||||||
$joblist.html($grid);
|
$joblist.html($grid);
|
||||||
for (var i = 0; i < jobsLength; i++) {
|
for (var i = 0; i < jobsLength; i++) {
|
||||||
|
|
@ -693,10 +731,11 @@
|
||||||
error: function (xhr, status, error) {
|
error: function (xhr, status, error) {
|
||||||
// Handle error response
|
// Handle error response
|
||||||
console.log(xhr.responseText);
|
console.log(xhr.responseText);
|
||||||
$('#joblist').html("found nothing");
|
$('#othersJobList').html("found nothing");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
$('#feelingLucky').click();
|
||||||
|
|
||||||
$("#upload-img").click(function () {
|
$("#upload-img").click(function () {
|
||||||
var input = $("<input type='file' accept='image/*'>").on("change", function () {
|
var input = $("<input type='file' accept='image/*'>").on("change", function () {
|
||||||
|
|
@ -710,19 +749,19 @@
|
||||||
input.click();
|
input.click();
|
||||||
});
|
});
|
||||||
|
|
||||||
var activeLink = localStorage.getItem('activeLink') || $('.nav-link:first').attr('href');
|
var activeLink = localStorage.getItem('activeLink') || $('.stable-diffusion .nav-link:first').attr('href');
|
||||||
|
|
||||||
// Set the active link as the current active link
|
// Set the active link as the current active link
|
||||||
$('.nav-link[href="' + activeLink + '"]').addClass('active');
|
$('.stable-diffusion .nav-link[href="' + activeLink + '"]').addClass('active');
|
||||||
$(activeLink).show();
|
$(activeLink).show();
|
||||||
|
|
||||||
$(".nav-link").click(function (e) {
|
$(".stable-diffusion .nav-link").click(function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var target = $(this).attr("href"); // get the href value of the clicked link
|
var target = $(this).attr("href"); // get the href value of the clicked link
|
||||||
|
|
||||||
// hide all card divs and show the corresponding one
|
// hide all card divs and show the corresponding one
|
||||||
$(".card-specific").hide();
|
$(".stable-diffusion-specific").hide();
|
||||||
$(".nav-link").removeClass("active");
|
$(".stable-diffusion .nav-link").removeClass("active");
|
||||||
$(this).addClass("active");
|
$(this).addClass("active");
|
||||||
$(target).show();
|
$(target).show();
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue