kaytprompt-v1/index.html at main · ktee95/kaytprompt-v1 · GitHub

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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KayT Prompt Generator</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-image: url(https://img.freepik.com/free-vector/pixel-rain-abstract-background_23-2148360348.jpg);
        background-position: center;
        background-size: contain;
    }
    .container {
        line-height: 1.5em;
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        background-color: #3b7aff7d;
        color: bisque;
    }
    button {
        text-align: center;
    margin: 0 auto;
    width: auto;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    }
    .prompt-list {
        margin-top: 20px;
    }
    h1 {text-align: center;}
    h6 {text-align: right;}
</style>
</head>
<body>
<div class="container">
    <h1>Hỗ trợ tạo Prompt v1</h1>
    <h6> by KayT.AI</h6>
    <form id="promptForm">
        <label for="style">Phong Cách:</label>
        <select id="style" required>
            <option value="anime style, cartoon style, 2D">Hoạt hình/Truyện Tranh</option>
            <option value="analogue">Ảnh Film</option>
            <option value="beauty">Chụp Beauty</option>
            <option value="candid">Chụp tự nhiên</option>
            <option value="documentary">Phóng sự</option>
            <option value="glamour">Glamour</option>
            <option value="highFashion">Thời Trang</option>
            <option value="instant">Film lấy liền</option>
            <option value="largeFormat">Large Format</option>
            <option value="lifestyle">Đời sống</option>
            <option value="paparazzi">Paparazzi</option>
            <option value="polaroid">máy Polaroid</option>
            <option value="streetFashion">Đường phố</option>
        </select><br>
        <label for="subject">Đối tượng :</label>
        <select id="subject" required>
            <option value="woman">cô gái</option>
            <option value="man">chàng trai</option>
            <option value="group of people">Nhóm người</option>
        </select><br>
        <label for="age">Độ tuổi :</label>
        <select id="age" required>
            <option value="teenage">vị thành niên</option>
            <option value="young">Trẻ</option>
            <option value="elderly">Lớn tuổi</option>
        </select><br>
        <label for="race">Sắc tộc:</label>
        <select id="race" required>
            <option value="American">Âu/Mỹ</option>
            <option value="Asian">Á</option>
            <option value="African">Phi</option>
        </select> <br>
        <label for="moreDetails">Mô tả thêm về đối tượng:</label><br>
<input type="checkbox" id="wearTshirt" value="wear tshirt">
<label for="wearTshirt">Mặc áo thun</label>
<input type="checkbox" id="wearCroptop" value="wear croptop">
<label for="wearCroptop">Mặc áo croptop</label>
<input type="checkbox" id="short" value="short">
<label for="short">Mặc quần short</label>
<input type="checkbox" id="shortDenim" value="short denim">
<label for="shortDenim">Mặc quần Jeans</label><br>
<input type="checkbox" id="nsfwNakedFemale" value="nsfw, naked, breasts, nipples, navel, bottomless">
<label for="nsfwNakedFemale">Khoả thân nữ</label>
<input type="checkbox" id="nsfwNakedMale" value="nsfw, naked, muscular body, abs, penis">
<label for="nsfwNakedMale">Khoả thân Nam</label><br>
<input type="checkbox" id="longHair" value="long hair">
<label for="longHair">Tóc dài</label>
<input type="checkbox" id="bobcutHair" value="bobcut hair">
<label for="bobcutHair">Tóc ngắn</label><br>
<input type="checkbox" id="blackHair" value="black hair">
<label for="blackHair">Tóc đen</label>
<input type="checkbox" id="blondeHair" value="blonde hair">
<label for="blondeHair">Tóc vàng</label><br>
<input type="checkbox" id="wearGlasses" value="wear glasses">
<label for="wearGlasses">Đeo kính</label>
<input type="checkbox" id="bikini" value="bikini">
<label for="bikini">Mặc bikini</label><br>
        <label for="poseAction">Hành động:</label>
        <select id="poseAction" required>
            <option value="sitting">Ngồi</option>
            <option value="standing">Đứng</option>
            <option value="squatting">Xổm</option>
            <option value="kneeling">Quỳ gối</option>
            <option value="lying">Nằm</option>
            <option value="jumping">Nhảy lên</option>
        </select> <br>
        <label for="framing">Khung:</label>
        <select id="framing" required>
            <option value="close up">Góc cận mặt</option>
            <option value="full body">Toàn thể</option>
            <option value="head shot, portrait">Chân dung</option>
            <option value="upper body">thân trên</option>
            <option value="medium shot">góc cận vừa</option>
        </select> <br>
        <label for="location">Địa điểm:</label>
        <select id="location" required>
            <option value="indoor">Trong nhà</option>
            <option value="outdoor">Ngoài trời</option>
        </select> <br>
        <label for="background">Bối cảnh:</label>
        <input type="text" id="background" placeholder="mô tả bối cảnh bằng tiếng anh" required><br>
        <label for="lighting">Ánh sáng:</label>
        <select id="lighting" required>
            <option value="bounced lighting, natural light">Ánh sáng môi trường</option>
            <option value="candlelight">Ánh sáng nến</option>
            <option value="cinematic light">Điện ảnh</option>
            <option value="soft diffused lighting">No sáng nhẹ</option>
            <option value="fill lighting">No sáng</option>
            <option value="edge lighting">Ánh sáng viền</option>
            <option value="flash photography">Đánh Flash</option>
            <option value="high key lighting">High Key</option>
            <option value="low key lighting">Low key</option>
            <option value="neon lighting">Neon màu</option>
            <option value="silhoutte lighting">Ngược sáng</option>
        </select> <br>
        <label for="cameraAngle">Góc máy:</label>
        <select id="cameraAngle" required>
        <option value="Dutch angle">Góc nghiêng</option>
        <option value="from above">Góc từ trên xuống</option>
        <option value="from below">Góc từ dưới lên</option>
            <option value="eye level">Ngang tầm mắt</option>
        </select> <br>
        <label for="lens">Ống kính:</label>
        <select id="lens" required>
        <option value="wide shot, 50mm lens">Góc thường</option>
        <option value="ultrawide shot, 8mm lens">Góc rộng</option>
        <option value="200mm lens, bokeh">Góc Tele</option>
        </select> <br>
        <label for="camera">Loại máy ảnh:</label>
        <select id="camera" required>
            <option value="ALEXA 65">ARRI ALEXA 65mm</option>
            <option value="Bolex H16">Bolex 16mm</option>
            <option value="Red camera">Máy điện ảnh RED</option>
            <option value="Canon EOS 5D">Canon 5D</option>
            <option value="Fujifilm X-T4">Fuji XT4</option>
            <option value="GoPro Hero">GoPro</option>
            <option value="Hasselblad X1D II">Hasselblad</option>
            <option value="Sony A7III">Sony A7 Mark 3</option>
            <option value="Leica T">Leica</option>
            <option value="Red camera">Máy điện ảnh RED</option>
            </select> <br>
        <button type="submit">Tạo Prompt</button>
    </form>
    <div class="prompt-list" id="promptList">
        <h2>Generated Prompt:</h2>
        <!-- Generated prompts will be displayed here -->
    </div>
    <button id="copyButton">Copy Prompt</button>

</div>

<script>
document.getElementById('promptForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent form submission

    // Get input values
    var style = document.getElementById('style').value;
    var styleText = document.getElementById('style').selectedOptions[0].textContent;
    var subject = document.getElementById('subject').value;
    var subjectText = document.getElementById('subject').selectedOptions[0].textContent;
    var age = document.getElementById('age').value; // Corrected variable name
    var ageText = document.getElementById('age').selectedOptions[0].textContent;
    var race = document.getElementById('race').value;
    var raceText = document.getElementById('race').selectedOptions[0].textContent;
    var moreDetails = [];
    var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
    checkboxes.forEach(function(checkbox) {
        moreDetails.push(checkbox.value);
    });
    moreDetails = moreDetails.join(', ');
    var poseAction = document.getElementById('poseAction').value;
    var poseActionText = document.getElementById('poseAction').selectedOptions[0].textContent;
    var framing = document.getElementById('framing').value;
    var framingText = document.getElementById('framing').selectedOptions[0].textContent;
    var location = document.getElementById('location').value;
    var locationText = document.getElementById('location').selectedOptions[0].textContent;
    var background = document.getElementById('background').value;
    var lighting = document.getElementById('lighting').value;
    var lightingText = document.getElementById('lighting').selectedOptions[0].textContent;
    var cameraAngle = document.getElementById('cameraAngle').value;
    var cameraAngleText = document.getElementById('cameraAngle').selectedOptions[0].textContent;
    var lens = document.getElementById('lens').value;
    var lensText = document.getElementById('lens').selectedOptions[0].textContent;
    var camera = document.getElementById('camera').value;
    var cameraText = document.getElementById('camera').selectedOptions[0].textContent;

    // Generate prompt
    var prompt = style + " photo of a " + age + " " + race + " " + subject + ", (" + moreDetails + "), " + poseAction + ", " + framing + " framing photo, " + location + ", " + background + ", " + lighting + ", shot " + cameraAngle + ",shot by " + camera + " with " + lens;

    // Display prompt
    var promptList = document.getElementById('promptList');
    promptList.innerHTML = "<p> (masterpiece:1.4),(ultra-detailed),(best shadow),(sharp focus:1.4)," + prompt + "</p>";
});
// Get the button element
var copyButton = document.getElementById('copyButton');

// Add click event listener to the button
copyButton.addEventListener('click', function() {
    // Get the generated prompt text
    var promptText = promptList.textContent;

    // Create a temporary textarea element
    var tempTextarea = document.createElement('textarea');
    tempTextarea.value = promptText;

    // Append the textarea to the document body
    document.body.appendChild(tempTextarea);

    // Select the text within the textarea
    tempTextarea.select();

    // Copy the selected text to the clipboard
    document.execCommand('copy');

    // Remove the temporary textarea
    document.body.removeChild(tempTextarea);

    // Inform the user that the prompt has been copied
    alert('Prompt đã được sao chép!');
});

</script>
</body>
</html>