This time, we created a craft search site for Minecraft, a game very popular among children.
You enter the item you want to make, and the AI will tell you what materials you need.
Here is the URL of the site I created!
(Minecraft recipe search site)
https://mdown.ai/content/35fea981-aa95-4e45-8f19-5dcc67f99f27
We will also describe some websites that will be helpful in the creation process, so please feel free to touch Markdwon AI!
Reference Site:
Step 1: Create the look and feel of the site
The first step is to create the look and feel of the site!
However, it is very difficult to code the site from scratch by myself, so I would like to throw the work to AI again.
However, some of you who are reading this article may not know about AI, or may not have paid for the usage limit of AI.
Here is good news for those people!
AI features such as Chat GPT, which normally have usage restrictions if you don’t pay, will be paid for by Markdown AI for this period only! So, you can use AI functions in Markdwon AI for free. This is a limited time offer, so please take advantage of this opportunity!
Next time, I will make a website with Markdown AI that will code the look and feel of Markdwon AI!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=VT323&display=swap" rel="stylesheet">
<title>AI dedicated to Minecraft</title>
<style>
body {
font-family: "VT323", monospace;
background-color: #87CEEB;
color: #333;
text-align: center;
padding: 50px;
}
h1 {
color: #3C3C3C;
font-size: 2em;
margin-bottom: 30px;
font-size:30px;
}
.container {
background-color: #F5F5DC;
border: 2px solid #3D3D3D;
padding: 20px;
border-radius: 10px;
display: inline-block;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width:100%;
}
input[type="text"] {
width: 100%;
padding: 10px;
font-size: 1em;
border: 2px solid #3D3D3D;
border-radius: 5px;
background-color: #D3D3D3;
font-family: "VT323", monospace;
}
button {
font-size: 1em;
padding: 10px 20px;
margin-top: 10px;
color: white;
background-color: #4CAF50;
border: 2px solid #3D3D3D;
border-radius: 5px;
cursor: pointer;
font-family: "VT323", monospace;
}
button:disabled {
background-color: #999;
cursor: not-allowed;
font-family: "VT323", monospace;
}
button:hover {
background-color: #45A049;
}
#answer-1731557184 {
font-family: "VT323", monospace;
margin-top: 20px;
padding: 15px;
background-color: #FFFACD;
border: 1px solid #3D3D3D;
border-radius: 5px;
font-size: 1.2em;
color: #333;
margin: 20px auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.container-item{
width:80%;
margin:0 auto;
}
.container-item-inner{
width:100%;
}
</style>
</head>
<body>
<h1>AI dedicated to Minecraft</h1>
<div class="container-item">
<div class="container">
<img src="https://storage.googleapis.com/topdowncom/content/9RZSoTmNDUcQVHkXTJTLrRq2kZh2/35fea981-aa95-4e45-8f19-5dcc67f99f27/%E3%83%9E%E3%82%A4%E3%82%AF%E3%83%A9.png" width="70%">
<div style="display: inline-block;" class="container-item-inner">
<input type="text" id="text-1731557184" placeholder="Enter item name (Example: Diamond nickel)">
<button type="button" id="button-1731557184">Run AI</button>
</div>
</div>
</div>
</body>
</html>Step 2: Customize AI
Next to coding, we would like to customize the AI to be implemented on the site.
Press the robot icon in the upper left corner→ Go to the Create Model screen→ Set the AI model.
In this case, we implemented GPT-4o-mini, considering the response speed!
For other detailed AI model descriptions, please refer to the following article.
The key to customizing AI is the “Prompt” in the middle of the page.
Prompt” is a kind of instruction to tell AI what you want it to do.
In this case, I ordered as follows!
Tell me the material of the micro item.
If it is typed in English, answer in English.
If you type in Japanese, answer in Japanese.Don’t forget to press the Update button at the bottom of the page when you are ready to enter the Prompt!
Step 3: Implement the AI on your site
After customizing the AI, return to the editor screen and implement the AI on your site!
Click the insert button at the top of the editor screen→click the script button→select the customized AI→click the insert button.
Then, the following code will be inserted!
<div style="display: inline-block;">
<input type="text" id="text-1731900373" style="width: 200px;" value="Teach me about Markdown.">
<button type="button" id="button-1731900373">Run AI</button>
</div>
<div id="answer-1731900373"></div>
<script>
(() => {
const button = document.getElementById('button-1731900373');
button.addEventListener('click', async event => {
button.disabled = true;
const serverAi = new ServerAI();
const message = document.getElementById('text-1731900373').value;
const answer = await serverAi.getAnswerText('9Af4rrfBUkE5BnmFghvStE', '', message);
document.getElementById('answer-1731900373').innerText = answer;
button.disabled = false;
});
})();
</script>The inserted template code is to display a simple text field and a button, and when the button is pressed, the code throws the question content to the AI!
Then, the AI created the following contents!
<div style="display: inline-block;">
<input type="text" id="text-1731550045" style="width: 200px;" placeholder="アイテム名を入力">
<button type="button" id="button-1731550045">AIに聞く</button>
</div>
<div id="answer-1731550045"></div>
<script>
(() => {
const button = document.getElementById('button-1731550045');
button.addEventListener('click', async event => {
button.disabled = true;
const serverAi = new ServerAI();
const itemName = document.getElementById('text-1731550045').value;
const query = `マインクラフトの${itemName}のクラフト素材を教えて`;
try {
const answer = await serverAi.getAnswerText('8FkhABK2e27RKRcXErJJGt', '', query);
document.getElementById('answer-1731550045').innerText = answer;
} catch (error) {
console.error('エラーが発生しました:', error);
document.getElementById('answer-1731550045').innerText = 'エラーが発生しました。再度お試しください。';
}
button.disabled = false;
});
})();
</script>Step 4: Finishing touches
Now it’s time to finish by connecting the two codes that AI wrote out for us in a nice way!
And that’s how it looked like!
I am reminded that the time has come when we do not have to do all the work ourselves, but can rely on AI to do most of the work!
We at Markdwon AI are working hard to create a future where users around the world can create high quality websites with ease and enjoyment.
Leave a Reply