ai创作家网页端,国内vps代理,vps服务器试用7天,VPS服务器带宽选择,牧云主机管理

🗣 Wd提问: ai创作家网页端

🤖 Ai回答:
当然，我可以为你提供一个简单的AI创作家网页端的示例代码。这个示例将使用HTML、CSS和JavaScript来创建一个基本的界面，用户可以在其中输入文本并生成一些创意内容。

html
<!DOCTYPE html
<html lang=en
<head
<meta charset=UTF-8
<meta name=viewport content=width=device-width, initial-scale=1.0
<titleAI 创作家</title
<style
body {
font-family: Arial, sans-serif;
background-color: f4f4f9;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: auto;
background: fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
textarea {
width: 100%;
height: 150px;
padding: 10px;
margin-bottom: 10px;
}
button {
display: block;
width: 100%;
padding: 10px;
background-color: 28a745;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: 218838;
}
pre {
background: f9f9f9;
padding: 10px;
overflow-x: auto;
}
</style
</head
<body
<div class=container
<h1AI 创作家</h1
<textarea id=inputText placeholder=输入你的文本...</textarea
<button onclick=generateContent()生成内容</button
<pre id=output</pre
</div

<script
async function generateContent() {
const inputText = document.getElementById('inputText').value;
if (!inputText) {
alert('请输入一些文本');
return;
}

try {
const response = await fetch('/api/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ text: inputText })
});

if (!response.ok) {
throw new Error('网络响应错误');
}

const data = await response.json();
document.getElementById('output').textContent = data.content;
} catch (error) {
console.error('生成内容时出错:', error);
alert('生成内容时出错，请稍后再试');
}
}
</script
</body
</html

说明：
1、HTML部分：
创建了一个简单的表单，包含一个文本区域用于输入文本和一个按钮用于触发内容生成。
使用`<pre`标签来显示生成的内容。

2、CSS部分：
基本的样式设置，包括字体、背景色、容器样式等。

3、JavaScript部分：
定义了`generateContent`函数，该函数在点击按钮时被调用。
使用`fetch` API向服务器发送请求，获取生成的内容，并将其显示在页面上。

注意事项：
这个示例假设你有一个后端服务 `/api/generate`，它能够处理POST请求并返回生成的内容。
实际应用中，你需要根据你的具体需求和后端API进行相应的调整。

希望这个示例对你有帮助！如果你有任何问题或需要进一步的功能，请告诉我。

Ai作答

📣 商家广告：