[FE] splits feeling lucky with history, adds nav bar
This commit is contained in:
parent
f997e7ecf3
commit
c9b0dcdc50
|
|
@ -12,10 +12,47 @@
|
|||
|
||||
<body>
|
||||
<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-header">
|
||||
<span>Stable Diffusion</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-8 mb-3">
|
||||
<div class="col mb-3">
|
||||
<div class="input-group">
|
||||
<label for="apiKey" class="input-group-text" data-en_XX="API Key" data-zh_CN="API 密钥">API
|
||||
Key</label>
|
||||
|
|
@ -27,16 +64,6 @@
|
|||
data-zh_CN="生成非公开图片">Generate Private Images</label>
|
||||
</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 class="row mb-3">
|
||||
<div class="input-group">
|
||||
|
|
@ -113,7 +140,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="stable-diffusion card-header">
|
||||
<ul class="nav nav-pills card-header-pills">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#card-txt" data-en_XX="Text-to-Image"
|
||||
|
|
@ -129,7 +156,7 @@
|
|||
</li>
|
||||
</ul>
|
||||
</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="col-md-4">
|
||||
<div class="card">
|
||||
|
|
@ -204,7 +231,7 @@
|
|||
</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="col-md-4">
|
||||
<div class="card">
|
||||
|
|
@ -295,7 +322,7 @@
|
|||
</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="col-md-4">
|
||||
<div class="card">
|
||||
|
|
@ -347,9 +374,10 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" data-en_XX="History" data-zh_CN="历史">History</div>
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<span data-en_XX="History" data-zh_CN="历史">History</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="input-group mb-3">
|
||||
<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="">
|
||||
<button id="getJobHistory" class="btn btn-primary" data-en_XX="Get Job(s)" data-zh_CN="搜索历史">Get
|
||||
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 id="joblist"></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>
|
||||
|
||||
<!-- CSS code -->
|
||||
|
|
@ -530,7 +568,7 @@
|
|||
top: clickedPosition.top,
|
||||
left: clickedPosition.left
|
||||
}).animate({
|
||||
top: input.offset().top ,
|
||||
top: input.offset().top,
|
||||
left: input.offset().left,
|
||||
opacity: 0
|
||||
}, 500, function () {
|
||||
|
|
@ -662,11 +700,11 @@
|
|||
success: function (response) {
|
||||
var jobsLength = response.jobs.length;
|
||||
if (jobsLength == 0) {
|
||||
$('#joblist').html("found nothing");
|
||||
$('#othersJobList').html("found nothing");
|
||||
return;
|
||||
}
|
||||
|
||||
var $joblist = $('#joblist');
|
||||
var $joblist = $('#othersJobList');
|
||||
var $grid = $('<div class="row"></div>');
|
||||
$joblist.html($grid);
|
||||
for (var i = 0; i < jobsLength; i++) {
|
||||
|
|
@ -693,10 +731,11 @@
|
|||
error: function (xhr, status, error) {
|
||||
// Handle error response
|
||||
console.log(xhr.responseText);
|
||||
$('#joblist').html("found nothing");
|
||||
$('#othersJobList').html("found nothing");
|
||||
}
|
||||
});
|
||||
});
|
||||
$('#feelingLucky').click();
|
||||
|
||||
$("#upload-img").click(function () {
|
||||
var input = $("<input type='file' accept='image/*'>").on("change", function () {
|
||||
|
|
@ -710,19 +749,19 @@
|
|||
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
|
||||
$('.nav-link[href="' + activeLink + '"]').addClass('active');
|
||||
$('.stable-diffusion .nav-link[href="' + activeLink + '"]').addClass('active');
|
||||
$(activeLink).show();
|
||||
|
||||
$(".nav-link").click(function (e) {
|
||||
$(".stable-diffusion .nav-link").click(function (e) {
|
||||
e.preventDefault();
|
||||
var target = $(this).attr("href"); // get the href value of the clicked link
|
||||
|
||||
// hide all card divs and show the corresponding one
|
||||
$(".card-specific").hide();
|
||||
$(".nav-link").removeClass("active");
|
||||
$(".stable-diffusion-specific").hide();
|
||||
$(".stable-diffusion .nav-link").removeClass("active");
|
||||
$(this).addClass("active");
|
||||
$(target).show();
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue