-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathtest.html
171 lines (150 loc) · 7.25 KB
/
test.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>未来日記</title>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.5;
background-color: #f2f2f2;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
h1 {
text-align: center;
color: #333;
font-size: 24px;
margin-bottom: 20px;
}
.form-container {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.form-input {
flex: 1;
border: none;
border-radius: 4px;
padding: 12px;
font-size: 16px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.form-button {
background-color: #4285F4;
color: #fff;
border: none;
border-radius: 4px;
padding: 12px 24px;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.form-button:hover {
background-color: #3367D6;
}
.schedule-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.time {
font-weight: bold;
color: #4285F4;
}
.activity {
margin-left: 20px;
}
.schedule-item {
padding: 12px;
border-bottom: 1px solid #ccc;
}
.schedule-item:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<div class="container">
<h1>未来日記</h1>
<div class="form-container">
<input type="text" class="form-input" id="prompt" placeholder="未来の予定を入力してください" required>
<button class="form-button" onclick="updateSchedule()">更新</button>
</div>
<button class="form-button" onclick="generateImage()">画像生成</button>
<ul class="schedule-list" id="schedule">
<li class="schedule-item"><span class="time">5:00</span>: 朝食（ごはん・卵・バナナ）</li>
<img id="generatedImage" src=""></img>
<li class="schedule-item"><span class="time">6:00</span>: ジョギング（30分）</li>
<li class="schedule-item"><span class="time">7:00</span>: 筋トレ（30分）</li>
<li class="schedule-item"><span class="time">8:00</span>: 朝食（ごはん・焼き肉・野菜）</li>
<li class="schedule-item"><span class="time">9:00</span>: 腹筋（30分）</li>
<li class="schedule-item"><span class="time">10:00</span>: 昼食（ごはん・チキンカツ・サラダ）</li>
<li class="schedule-item"><span class="time">11:00</span>: ウォーキング（60分）</li>
<li class="schedule-item"><span class="time">12:00</span>: 昼食（ごはん・ほうれん草・ハム）</li>
<li class="schedule-item"><span class="time">13:00</span>: ストレッチ（30分）</li>
<li class="schedule-item"><span class="time">14:00</span>: タンパク質ドリンク（1杯）</li>
<li class="schedule-item"><span class="time">15:00</span>: プールへ行く（60分）</li>
<li class="schedule-item"><span class="time">16:00</span>: スイミング（60分）</li>
<li class="schedule-item"><span class="time">17:00</span>: タンパク質ドリンク（1杯）</li>
<li class="schedule-item"><span class="time">18:00</span>: 夕食（ごはん・魚・サラダ）</li>
<li class="schedule-item"><span class="time">19:00</span>: 歩く（60分）</li>
<li class="schedule-item"><span class="time">20:00</span>: 夕食（ごはん・鶏肉・野菜）</li>
</ul>
</div>
<script>
function updateSchedule() {
const promptInput = document.getElementById('prompt');
const schedule = document.getElementById('schedule');
// プロンプトの値を取得し、スケジュールを更新
const promptValue = promptInput.value;
if (promptValue) {
schedule.innerHTML = generateSchedule(promptValue);
}
}
function generateSchedule(prompt) {
// 入力されたプロンプトに基づいてスケジュールを生成
// プロンプトに応じたスケジュールを返すロジックを実装してください
// 以下は例として、入力されたプロンプトを表示するだけのスケジュールを返すコードです
const schedule = `
<li class="schedule-item"><span class="time">5:00</span>: 朝食（ごはん・卵・バナナ）</li>
<li class="schedule-item"><span class="time">6:00</span>: ジョギング（30分）</li>
<li class="schedule-item"><span class="time">7:00</span>: 筋トレ（30分）</li>
<li class="schedule-item"><span class="time">8:00</span>: 朝食（ごはん・焼き肉・野菜）</li>
<li class="schedule-item"><span class="time">9:00</span>: 腹筋（30分）</li>
<li class="schedule-item"><span class="time">10:00</span>: 昼食（ごはん・チキンカツ・サラダ）</li>
<li class="schedule-item"><span class="time">11:00</span>: ウォーキング（60分）</li>
<li class="schedule-item"><span class="time">12:00</span>: 昼食（ごはん・ほうれん草・ハム）</li>
<li class="schedule-item"><span class="time">13:00</span>: ストレッチ（30分）</li>
<li class="schedule-item"><span class="time">14:00</span>: タンパク質ドリンク（1杯）</li>
<li class="schedule-item"><span class="time">15:00</span>: プールへ行く（60分）</li>
<li class="schedule-item"><span class="time">16:00</span>: スイミング（60分）</li>
<li class="schedule-item"><span class="time">17:00</span>: タンパク質ドリンク（1杯）</li>
<li class="schedule-item"><span class="time">18:00</span>: 夕食（ごはん・魚・サラダ）</li>
<li class="schedule-item"><span class="time">19:00</span>: 歩く（60分）</li>
<li class="schedule-item"><span class="time">20:00</span>: 夕食（ごはん・鶏肉・野菜）</li>
`;
return schedule;
}
function generateImage() {
const prompt = "5:00: 朝食（ごはん・卵・バナナ）"
let url = `http://127.0.0.1:5000/?prompt=${encodeURIComponent(prompt)}`;
fetch(url)
.then(response => response.blob()) // レスポンスを Blob として解釈
.then(blob => {
var imageUrl = URL.createObjectURL(blob); // Blob を URL に変換
console.log(imageUrl);
document.getElementById('generatedImage').src = imageUrl; // 画像の src を更新
})
.catch(error => console.error(error));
}
</script>
</body>
</html>