Skip to content

Image recognition #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Tsurubara-UTcode wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Image recognition #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
928036c
easy image recognition
Tsurubara-UTcode Aug 31, 2024
a44f280
簡易的な画像認識と食材の配列に追加する機能を実装
Tsurubara-UTcode Sep 1, 2024
36a1c1d
image recognition fail
Tsurubara-UTcode Sep 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 35 additions & 33 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI チャット</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
<link rel="stylesheet" href="./style.css" />
<style>
/* CSSスタイルの追加 */
.menu-container {
display: flex;
justify-content: space-around;
Expand All @@ -21,39 +22,43 @@
border-radius: 5px;
}
#response-display {
border: 2px solid #333; /* 枠線のスタイル */
padding: 15px; /* 内側の余白 */
border-radius: 5px; /* 角を丸くする */
background-color: #f5f5f5; /* 背景色 */
margin-top: 20px; /* 上部のマージン */
max-width: 800px; /* 最大幅 */
word-wrap: break-word; /* 長い単語を折り返す */
white-space: pre-wrap; /* 改行を保持する */
border: 2px solid #333;
padding: 15px;
border-radius: 5px;
background-color: #f5f5f5;
margin-top: 20px;
max-width: 800px;
word-wrap: break-word;
white-space: pre-wrap;
}
#response-display ul {
list-style-type: disc; /* リストのスタイル */
padding-left: 20px; /* リストの左パディング */
list-style-type: disc;
padding-left: 20px;
}
#response-display li {
margin-bottom: 10px; /* リストアイテムの下マージン */
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>AI チャット</h1>
<!-- レスポンスを表示するための要素 -->
<input type="file" id="imageUploadInput" accept="image/*">
<img id="image-element" alt="Uploaded Image" style="max-width: 500px; display: block; margin-top: 20px;">

<ul id="recognized-ingredients"></ul>

<div id="time-people">
<div id="cook-time" class="slider-container">
調理時間
<input type="range" min="10" max="100" value="10" step="10" id="cook-time-slider">
<div id="cook-time-display">10</div>
<div id="cook-time" class="slider-container">
調理時間
<input type="range" min="10" max="100" value="10" step="10" id="cook-time-slider">
<div id="cook-time-display">10</div>
</div>
<div id="people-number" class="slider-container">
人数
<input type="range" min="1" max="6" value="1" step="1" id="people-number-slider" class="sliderbar">
<div id="people-number-display">1</div>
</div>
</div>
<div id="people-number" class="slider-container">
人数
<input type="range" min="1" max="6" value="1" step="1" id="people-number-slider" class="sliderbar">
<div id="people-number-display">1</div>
</div>
</div>
<div id="more-request">
<div>その他の要望</div>
<input id="more-request-message" />
Expand Down Expand Up @@ -85,12 +90,11 @@ <h1>AI チャット</h1>
</select>
</form>
</div>
<div id="selectButton"></div>
<div id="selectButton">選択されたジャンル</div>
<div>選択した食材</div>
<ul id="selectedIngredients"></ul>
<button id="submit-button">送信</button>

<!-- チャットボックス -->
<ul id="chat-messages">
<template id="chat-message-template">
<li class="chat-message">
Expand All @@ -102,14 +106,12 @@ <h1>AI チャット</h1>
</li>
</template>
</ul>
<!-- 献立を表示するためのコンテナ -->
<div class="menu-container">
<div id="menu1" class="menu-item"></div>
<div id="menu2" class="menu-item"></div>
<div id="menu3" class="menu-item"></div>
</div>
<!-- レシピの詳細 -->
<div id="response-display"></div>
<div class="menu-container">
<div id="menu1" class="menu-item"></div>
<div id="menu2" class="menu-item"></div>
<div id="menu3" class="menu-item"></div>
</div>
<div id="response-display"></div>

<script src="/script.js"></script>
</body>
Expand Down
Loading