-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
207 lines (171 loc) · 10.2 KB
/
index.html
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
<!-- /*
* Template Name: Property
* Template Author: Untree.co
* Template URI: https://untree.co/
* License: https://creativecommons.org/licenses/by/3.0/
*/ -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<meta name="author" content="JHL">
<link rel="shortcut icon" href="./favicon.png">
<meta name="description" content="" />
<meta name="keywords" content="bootstrap, bootstrap5" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/tiny-slider.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/style.css">
<title>Lucky Vicky Generator</title>
</head>
<body>
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close">
<span class="icofont-close js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<nav class="site-nav">
<div class="container">
</div>
</nav>
<div class="bg-video overlay">
<video class="bg-video__content" autoplay muted loop>
<source src="images/wonyoung.mp4" type="video/mp4" />
Your browser is not supported!
</video>
</div>
<div class="hero">
<div class="hero-slide">
<!-- <div class="img overlay" style="background-image: url('images/hero_bg_3.jpg')"></div> -->
</div>
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-lg-9 text-center">
<h1 class="heading title_h1" data-aos="fade-up">🍀 원영적 사고 변환기 💛✨</h1>
<style>
.title_h1 {
font-family: 'PyeongChangPeace-Bold' !important;
}
</style>
<form action="#" class="narrow-w form-search d-flex align-items-stretch mb-3" data-aos="fade-up" data-aos-delay="200">
<input type="text" class="form-control px-4 btn_text" placeholder="러키비키하게 바꾸고 싶은 상황을 적어봐!">
<button type="submit" class="btn btn-primary btn_text btn_color go">GO!</button>
<style>
.btn_text {
font-family: 'PyeongChangPeace-Normal' !important;
}
.btn_text2 {
font-family: 'BMJUA' !important;
font-weight: bold;
font-size:x-large;
}
.btn_color {
background-color: #2DB400 !important;
border-color: #2DB400 !important;
}
.result {
display: none !important;
}
</style>
</form>
<script type="module" src="./generative-ai.js"></script>
<script src="./apikey.js"></script>
<script type="module">
// Fetch your API_KEY
import { GoogleGenerativeAI } from './generative-ai.js';
const API_KEY = config.apikey;
// console.log(API_KEY)
// Reminder: This should only be for local testing
// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);
async function run(textPrompt) {
// The Gemini 1.5 models are versatile and work with both text-only and multimodal prompts
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});
var myPrompt = `
Instruction
너는 현생에 찌들어 아무리 고민해도 생각을 긍정적으로 바꾸기 어려웠던 분들을 위해
부정적 사고를 쉽게 긍정적으로 바꿔주는 변환기이야.
내가 내 상황을 입력하면 이것을 긍정적인 사고로 변환해서 대답해줘.
그리고 답변의 맨 마지막에는 '🤭 완전 럭키비키잔앙🍀🍀' 을 반드시 붙여줘.
The response must be in JSON format.
The response must be in Korean and should not include any additional commentary. Regardless of other factors, always provide response in korean。
상황 : ` + textPrompt;
var examplePrompt = `
Example
response: {"상황": "비가 와서 너무 추워", "대답": "갑자기 비가 와서 추워 🥺☁️☁️ 그런데 운치있는 빗소리를 들을 수 있으니까 🤭 완전 럭키비키잔앙🍀🍀"}
response: {"상황": "주식 수익률 마이너스 70프로 달성했어", "대답": "헉, 진짜? 나도 얼마 전에 비슷한 상황이었어. 근데 생각해보니까, 이걸 계기로 더 잘 배울 수 있었던 것 같아. 이제는 더 신중하게 투자하게 되더라구. 🤭 완전 럭키비키잔앙🍀🍀"}
response: {"상황": "나 퇴근이 너무 하고 싶어", "대답": "아, 퇴근하고 싶은 마음, 너무 잘 알아! 곧 퇴근해서 하고 싶은 일들, 맛있는 저녁, 편안한 휴식 생각하면서 힘내자! 퇴근 후의 행복이 기다리고 있으니까! 🤭 완전 럭키비키잔앙🍀🍀"}
response: {"상황": "기아가 30:6으로 졌어", "대답": "와우, 기아가 30:6으로 졌는데! 정말 최악의 상황이었겠지. 그런데 상상해봐, 만약 우리가 6점도 못 넣고 0:30으로 졌다면 어땠을까? 그럼 정말로 최악의 상황이었을 거야. 하지만 지금은? 우리는 6점을 넣었어! 비록 졌지만, 적어도 우리는 약간의 점수를 얻었어. 🤭 완전 럭키비키잔앙🍀🍀"}
response: {"상황": "나 붙을 줄 알았던 면접에서 떨어졌어", "대답": "헉, 진짜? 정말 힘들겠다. 근데 생각해보니까, 내가 그 면접에서 떨어졌기 때문에 더 좋은 기회를 얻을 수 있었을지도 몰라. 내가 그 회사에 들어갔다면, 더 나은 회사에서 일할 수 있는 기회를 놓칠 수도 있었을 거야. 그리고 면접에서 떨어진 덕분에, 더 많은 연습을 하고 더 나은 면접 기술을 개발할 수 있었을 거야. 그래서, 지금 이 상황이 딱 좋아서 면접에서 떨어진 거야! 🤭 완전 럭키비키잔앙🍀🍀"}
response: {"상황": "알바 같이 일하는 사람 성격이 지랄맞아", "대답": "와 ~ 진짜 짜증나는데! 그냥 내가 참는게 제일 좋겠다 싶었는데, 그래도 이렇게 참으면서 나 자신을 더 성장시킬 수 있겠다 싶어! 🤭 완전 럭키비키잔앙🍀🍀"}
response: {"상황": "상사가 거지같아", "대답": "상사가 거지같아서 진짜 짜증나는데, 이런 상황에서도 나는 웃으며 일을 해내는 내 자신이 대단하다고 생각해! 이렇게 어려운 일을 해내면 나만의 역량이 더 늘어나겠지? 그리고 이런 상사가 있다면 내가 성장할 수 있는 기회가 더 많아진다는 생각으로 힘내고 있어. 🤭 완전 럭키비키잔앙🍀🍀"}
response: {"상황": "오늘이 시험인데 공부를 다 못했어", "대답": "와우! 오늘이 시험이라고 공부를 다 못했는데, 그래도 이제 시험 끝나면 방학이양!! 🤭 완전 럭키비키잔앙🍀🍀"}
response: {"상황": "굿즈를 사고 싶은데 못 사", "대답": "사고 싶은 굿즈가 있다면 그걸 못 산다는 건 좀 아쉬운 상황이지만, 돈을 아끼는 건 나쁜 일이 아니야. 돈을 아끼면 나중에 더 좋은 굿즈를 살 수 있을 테니까 🤭 완전 럭키비키잔앙🍀🍀"}
`;
const prompt = myPrompt + examplePrompt;
const result = await model.generateContent(prompt);
const response = await result.response;
var text = response.text();
var res = text.split("```json")[1].split("```")[0]
console.log(res);
var jsonObject = JSON.parse(res);
// 파싱된 객체의 값 출력
var inputText = jsonObject.상황;
var outputTest = jsonObject.대답;
outputTest = outputTest.replace('.','.<br>').replace('!','!<br>');
console.log(inputText); // 여자친구가 없어서 너무 외로워
console.log(outputTest);
// class가 'go'인 버튼 찾기
const goButton = document.querySelector('.go');
// 바꾸고 싶은 input 요소를 선택합니다.
const Element = document.querySelector('.btn_text');
// 기존 클래스 'btn_text'를 'btn_text2'로 변경합니다.
goButton.classList.replace('btn_text', 'btn_text2');
Element.style.display = 'none';
// input 요소의 value 속성에 새로운 값을 할당합니다.
goButton.innerHTML = outputTest;
}
const searchForm = document.querySelector('.narrow-w.form-search');
const inputField = searchForm.querySelector('input');
const submitButton = searchForm.querySelector('button[type="submit"]');
submitButton.addEventListener('click', (event) => {
event.preventDefault(); // 기본 submit 동작 방지
const inputValue = inputField.value.trim();
if (inputValue === '') {
alert('러키비키하게 바꾸고 싶은 상황을 입력해주세요!💛✨');
} else {
var res = run(inputValue); // 입력값이 있을 경우 run 함수 실행
console.log('결과', res);
}
});
</script>
</div>
</div>
</div>
</div>
</div> <!-- /.container -->
</div> <!-- /.site-footer -->
<!-- Preloader -->
<div id="overlayer"></div>
<div class="loader">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<!-- <script src="js/tiny-slider.js"></script> -->
<script src="js/aos.js"></script>
<script src="js/navbar.js"></script>
<script src="js/counter.js"></script>
<script src="js/custom.js"></script>
</body>
</html>