|
<!DOCTYPE html>
|
|
<html lang="ja">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LLM Client</title>
|
|
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
|
crossorigin="anonymous">
|
|
<style>
|
|
#novelContent1,
|
|
#novelContent2 {
|
|
height: 50vh;
|
|
}
|
|
|
|
#generatePrompt,
|
|
#nextPrompt {
|
|
height: 20vh;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
|
|
#novelContent1,
|
|
#novelContent2,
|
|
#modal-body-1 textarea {
|
|
height: 90vh;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body data-bs-theme="dark">
|
|
<div id="my-modal" class="modal fade" tabindex="-1" aria-labelledby="my-modalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="bg-primary modal-header">
|
|
<h5 id="modal-title-1" class="modal-title modal-text modal-text-1">API Settings</h5>
|
|
<h5 id="modal-title-2" class="modal-title modal-text modal-text-2">Utility</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
|
|
aria-label="Close"></button>
|
|
</div>
|
|
<div id="modal-body-1" class="modal-body modal-text modal-text-1">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<input type="text" class="form-control" id="endpoint" placeholder="Endpoint">
|
|
</div>
|
|
<div class="col-12">
|
|
<textarea class="form-control" id="headers" placeholder="Headers" rows="7"></textarea>
|
|
</div>
|
|
<div class="col-12">
|
|
<textarea class="form-control" id="jsonBody" placeholder="Body" rows="7"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="modal-body-2" class="modal-body modal-text modal-text-2">
|
|
<div class="row">
|
|
<div class="col-12 mb-3">
|
|
<button id="formatTextButton" class="btn btn-primary" onclick="formatText()">
|
|
<i class="fa-solid fa-align-left"></i> 改行を整理
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container-fluid">
|
|
<div class="row m-0 border-start border-end border-2">
|
|
<div class="col-12">
|
|
<textarea class="form-control" id="generatePrompt" placeholder="システムプロンプトを入力"></textarea>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<textarea class="form-control" id="novelContent1" placeholder="ここに小説の本文を入力してください"></textarea>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<textarea class="form-control" id="novelContent2" placeholder="ここに続きが表示されます。"></textarea>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<textarea class="form-control" id="nextPrompt" placeholder="次の展開を指示"></textarea>
|
|
</div>
|
|
<div class="col-12 col-md-6 small lh-1">
|
|
<div class="row">
|
|
<div class="col-12 col-md-2 d-flex align-items-center mb-2 mb-md-0">
|
|
<button class="btn btn-primary mx-1" data-bs-toggle="modal" data-bs-target="#my-modal"
|
|
data-modal-text="modal-text-1">
|
|
<i class="fa-solid fa-cog"></i>
|
|
</button>
|
|
<button class="btn btn-primary mx-1" data-bs-toggle="modal" data-bs-target="#my-modal"
|
|
data-modal-text="modal-text-2">
|
|
<i class="fa-solid fa-wrench"></i>
|
|
</button>
|
|
</div>
|
|
<div class="col-12 col-md-4 mb-2 mb-md-0 px-5">
|
|
<label for="characterCount" class="form-label mb-0 me-3">文字数</label>
|
|
<input data-input-group="characterCount" type="range" class="form-range me-2"
|
|
id="characterCount" min="1" max="4096" value="3000">
|
|
<input data-input-group="characterCount" type="number" class="form-control me-2"
|
|
id="characterCountInput" value="3000" min="1" max="4096">
|
|
</div>
|
|
<div class="col-12 col-md-3 mb-2 mb-md-0 px-5">
|
|
<label for="encodeLength" class="form-label mb-0 me-3">エンコード頻度</label>
|
|
<input data-input-group="encodeLength" type="range" class="form-range me-2" id="encodeLength"
|
|
min="1" max="16" value="16">
|
|
<input data-input-group="encodeLength" type="number" class="form-control me-2"
|
|
id="encodeLengthInput" min="1" max="16" value="16">
|
|
</div>
|
|
<div class="col-12 col-md-3">
|
|
<div class="form-check mb-0">
|
|
<label class="form-check-label" for="partialEncodeToggle">エンコード</label>
|
|
<input class="form-check-input" type="checkbox" id="partialEncodeToggle">
|
|
</div>
|
|
<div class="form-check mb-0">
|
|
<label class="form-check-label" for="streamToggle">stream</label>
|
|
<input class="form-check-input" type="checkbox" id="streamToggle" checked>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const inputGroups = document.querySelectorAll('[data-input-group]');
|
|
inputGroups.forEach(group => {
|
|
const inputs = document.querySelectorAll(`[data-input-group="${group.dataset.inputGroup}"]`);
|
|
|
|
inputs.forEach(input => {
|
|
input.addEventListener('input', function () {
|
|
inputs.forEach(otherInput => {
|
|
if (otherInput !== input) {
|
|
otherInput.value = this.value;
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
<div class="col-12 col-md-2 d-flex align-items-center mb-2 mb-md-0">
|
|
<button id="requestButton" class="btn btn-primary me-2" onclick="Request()">
|
|
続きを生成
|
|
</button>
|
|
<button id="stopButton" class="btn btn-danger d-none" onclick="stopGeneration()">
|
|
中止
|
|
</button>
|
|
</div>
|
|
<div class="col-12 col-md-4 d-flex align-items-center justify-content-end">
|
|
<input type="text" class="form-control me-2" id="savedTitle" placeholder="タイトル">
|
|
<button id="saveButton" class="btn btn-secondary me-2" onclick="saveToJson()">
|
|
保存
|
|
</button>
|
|
<button id="loadButton" class="btn btn-secondary" onclick="loadFromJson()">
|
|
読込
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://unpkg.com/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
</html> |
