Calculator Tools Calculator Tools
Create

しりとり with GPT

Aug 12, 2026

About this app

Play Shiritori game with GPT

しりとり with GPT Submit

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>しりとり with GPT</title>
<meta name="description" content="Play Shiritori game with GPT">
<meta name="keywords" content="shiritori, game, GPT">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<!-- Built-In Functions for Apps -->
<script type="text/javascript">
var localStoragePrefix = "ct-168990991840756";
var lastSave = 0;

// save to localstorage
function saveLocal(data) {
if (Date.now() - lastSave < 1000) {
return;
}
// save to cookie
let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname +
"'; SameSite=Strict";
cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString();
document.cookie = cookie;
lastSave = Date.now();
}

// load from localstorage
function loadLocal() {
var cookiePrefix = localStoragePrefix + "=";
var cookieStart = document.cookie.indexOf(cookiePrefix);
if (cookieStart > -1) {
let cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd);
return JSON.parse(cookieData);
}
}

// GPT API Call
function callGptApi(prompt) {
// Replace with your GPT API endpoint
var apiUrl = "<YOUR_GPT_API_ENDPOINT>";

// Replace with your GPT API key
var apiKey = "<YOUR_GPT_API_KEY>";

var headers = {
"Content-Type": "application/json",
"Authorization": "Bearer " + apiKey
};

var data = {
"prompt": prompt,
"max_tokens": 50
};

$.ajax({
url: apiUrl,
type: "POST",
headers: headers,
data: JSON.stringify(data),
success: function(response) {
var output = response.choices[0].text.trim();
handleGptResponse(output);
},
error: function(xhr, status, error) {
console.error("GPT API Error:", error);
}
});
}

// Handle GPT API response
function handleGptResponse(output) {
var $logContainer = $("#log-container");
var $log = $("<div>").text("GPT: " + output);
$logContainer.append($log);
$logContainer.scrollTop($logContainer[0].scrollHeight);
}

// Start Shiritori game
function startGame() {
var $input = $("#input");
var word = $input.val().trim();

if (word !== "") {
var $logContainer = $("#log-container");
var $log = $("<div>").text("You: " + word);
$logContainer.append($log);
$logContainer.scrollTop($logContainer[0].scrollHeight);

$input.val("");
callGptApi(word);
}
}
</script>

<style>
/* App CSS Goes Here */
body {
background-color: #f8f9fa;
}

.container {
max-width: 500px;
margin-top: 50px;
}

.input-group {
margin-bottom: 20px;
}

.form-control {
border-color: #17a2b8;
}

#log-container {
max-height: 300px;
overflow-y: auto;
border: 1px solid #17a2b8;
padding: 10px;
background-color: #fff;
}

.log {
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div class="input-group">
<input id="input" type="text" class="form-control" placeholder="Enter a word">
<button class="btn btn-primary" onclick="startGame()">Submit</button>
</div>
<div id="log-container"></div>
</div>
</body>
</html>