File size: 8,351 Bytes
d131a6f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 |
<!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> |