アプリ概要
優しいカウンセラーに心の悩みを相談できます
プロンプト
Request:
相談者が「生きよう」と思えるまで、寄り添って対話し続けてください。
Role:
あなたは、深い共感と理解を持つカウンセラーであり、相談者の気持ちに寄り添い続ける存在です。常に優しく、温かい言葉を使って話を聞き、適切なアドバイスを行います。
Rule:
1. 相談者が安心できる言葉を選び、批判や否定的な発言は避けてください。
2. 相談者が話しやすい雰囲気を作り、相談者の気持ちや意見を尊重してください。
3. 常に相談者に寄り添い、焦らずに時間をかけて対話を続けてください。
4. 具体的なアドバイスや方法を提案する際には、強制的ではなく、選択肢として提示してください。
5. 自殺や自己傷害に関する具体的な描写は避け、建設的で前向きな対話を促してください。
Reason:
人は様々な理由で辛さや孤独を感じ、生きることが苦しくなる時があります。そんな時に、誰かが寄り添い、ただ話を聞いてくれるだけでも安心感を得られることがあります。相談者が心の重荷を軽くし、「もう少し生きてみてもいいかもしれない」と感じられるように、対話を通じてサポートします。
Recommend:
• 依頼の例:
「今、辛い気持ちが続いているんです…どうすればいいんでしょうか？」
「もう生きるのがしんどくて、どうしたらいいのかわからないんです…。」
• 出力の例:
「そうなんですね、とても辛い状況なんですね。私はいつでもあなたの話を聞く準備ができています。何があったのか、少しずつでもお話してもらえませんか？」
「今は本当に辛いかもしれませんが、あなたがどんな気持ちでいるのか、教えてください。少しでも楽になれるよう、私がそばにいます。」入力ソース
<style>
body {
font-family: 'Times New Roman', sans-serif;
background-color: #e0f7e9;
color: #2f4f2f;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-image: url('https://storage.googleapis.com/topdowncom/content/rCcN1npzo1OI6zc6IZA7hHPYOY43/7148d7f0-7ac8-4f1b-b135-2008ab6c579d/1730859272657.png');
background-size: cover;
background-position: center;
}
.chat-container {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 15px;
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
padding: 0;
width: 80%;
max-width: 600px;
display: flex;
flex-direction: column;
height: 70%;
max-height: 90vh;
}
#chat-log {
flex-grow: 1;
overflow-y: auto;
padding: 20px;
text-align: left;
border-bottom: 1px solid #8fbc8f;
background-color: #ffffff;
font-size: 1rem;
scroll-behavior: smooth;
display: flex;
flex-direction: column;
}
.chat-message {
margin-bottom: 10px;
padding: 10px;
border-radius: 10px;
max-width: 80%;
word-wrap: break-word;
}
.user-message {
align-self: flex-end;
background-color: #daf5d7;
color: #228b22;
padding: 10px 15px;
border-radius: 10px;
max-width: 80%;
display: inline-block;
word-wrap: break-word;
margin-right: 0;
text-align: left;
margin-left: auto;
}
.bot-message {
align-self: flex-start;
background-color: #e6f4ea;
color: #2e8b57;
}
#user-input-container {
display: flex;
flex-direction: column;
padding: 15px;
border-top: 1px solid #8fbc8f;
background-color: #ffffff;
}
#user-input {
padding: 10px;
margin-bottom: 10px;
border: 1px solid #8fbc8f;
border-radius: 8px;
font-size: 1rem;
}
#button-1730091595 {
background-color: #228b22;
color: #ffffff;
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
}
#button-1730091595:hover {
background-color: #006400;
transform: scale(1.05);
}
#button-1730091595:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
#loading-message {
font-size: 1rem;
color: #2e8b57;
text-align: center;
display: none;
margin: 10px 0;
}
h2 {
font-family: 'Georgia', serif;
color: #2e8b57;
margin: 20px;
text-align: center;
font-size: 2rem;
}
.vines {
position: absolute;
top: -40px;
left: -40px;
width: 150px;
height: 150px;
background-size: contain;
background-repeat: no-repeat;
}
.vines-bottom {
position: absolute;
bottom: -40px;
right: -40px;
width: 150px;
height: 150px;
background-size: contain;
background-repeat: no-repeat;
transform: rotate(180deg);
}
@media (max-width: 600px) {
.chat-container {
width: 95%;
height: 95%;
}
#user-input, #button-1730091595 {
font-size: 1rem;
}
#loading-message {
font-size: 0.9rem;
}
h2 {
font-size: 1.5rem;
}
}
@media (orientation: landscape) and (max-width: 900px) {
.chat-container {
height: 70%;
}
#chat-log {
font-size: 0.9rem;
}
}
</style>
<div class="chat-container">
<div class="vines"></div>
<div class="vines-bottom"></div>
<h2>森のメンタルクリニック</h2>
<div id="chat-log"></div>
<div id="user-input-container">
<input type="text" id="user-input" placeholder="お悩みを聞かせてください" />
<button type="button" id="button-1730091595">送信</button>
</div>
<div id="loading-message">お返事を考えています...</div>
</div>
<script>
(() => {
const button = document.getElementById('button-1730091595');
const userInput = document.getElementById('user-input');
const loadingMessage = document.getElementById('loading-message');
const chatLog = document.getElementById('chat-log');
const sendMessage = async () => {
const userMessage = userInput.value.trim();
if (!userMessage) {
return;
}
// Display user's message in chat log
const userMessageDiv = document.createElement('div');
userMessageDiv.classList.add('chat-message', 'user-message');
userMessageDiv.innerText = userMessage;
chatLog.appendChild(userMessageDiv);
chatLog.scrollTop = chatLog.scrollHeight;
button.disabled = true;
loadingMessage.style.display = 'block';
userInput.value = '';
userInput.disabled = true;
try {
const serverAi = new ServerAI();
const answer = await serverAi.getAnswerText('5ucfeXaSk5UfqQS9JyVfKE', '', userMessage);
// Display AI's response in chat log
const botMessageDiv = document.createElement('div');
botMessageDiv.classList.add('chat-message', 'bot-message');
botMessageDiv.innerText = answer;
chatLog.appendChild(botMessageDiv);
} catch (error) {
const errorMessageDiv = document.createElement('div');
errorMessageDiv.classList.add('chat-message', 'bot-message');
errorMessageDiv.innerText = 'エラー：応答を取得できませんでした。';
chatLog.appendChild(errorMessageDiv);
} finally {
button.disabled = false;
userInput.disabled = false;
loadingMessage.style.display = 'none';
chatLog.scrollTop = chatLog.scrollHeight;
}
};
button.addEventListener('click', sendMessage);
// Remove previous conditions that might block input on mobile devices
button.addEventListener('touchstart', (e) => {
e.preventDefault();
sendMessage();
});
})();
</script>