Gemini 3
作为继 Gemini 1.0 和 2.0 之后的又一里程碑式产品，Gemini 3 的问世不仅标志着 Google 在与 OpenAI（同期发布 GPT-5.1）的激烈角逐中确立了新的技术高地，更揭示了人工智能从单纯的“信息检索与生成”向“自主推理与代理执行（Agentic Execution）”的范式转移
Gemini 3生成HTML
与
gemini.google.com/share/2173f…
完整HTML代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>AI 模型大转盘抽签</title>
<style>
:root {
--primary-color: #4a90e2;
--bg-color: #f0f2f5;
--text-color: #333;
}
body {
font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: var(--bg-color);
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden; /* 防止旋转时出现滚动条 */
}
h1 {
color: var(--text-color);
margin-bottom: 20px;
font-size: 24px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
/* 转盘容器 */
.wheel-wrapper {
position: relative;
width: 320px;
height: 320px;
margin-bottom: 30px;
}
/* 响应式调整 */
@media (min-width: 500px) {
.wheel-wrapper {
width: 450px;
height: 450px;
}
h1 {
font-size: 32px;
}
}
/* 实际的转盘 Canvas */
canvas {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0 10px 20px rgba(0,0,0,0.15), 0 0 0 10px rgba(255,255,255,0.5);
transition: transform 5s cubic-bezier(0.25, 0.1, 0.25, 1); /* 5秒缓动动画 */
}
/* 顶部指针 */
.pointer {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
width: 40px;
height: 50px;
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.3));
}
/* 指针形状绘制 */
.pointer::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 50px solid #ff4757;
}
/* 中心装饰点 */
.center-dot {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
border: 4px solid #ddd;
z-index: 5;
}
/* 按钮样式 */
#spinBtn {
background: linear-gradient(135deg, #6c5ce7, #a29bfe);
border: none;
padding: 15px 50px;
color: white;
font-size: 20px;
font-weight: bold;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
transition: transform 0.1s, box-shadow 0.1s;
outline: none;
user-select: none;
}
#spinBtn:active {
transform: scale(0.96);
}
#spinBtn:disabled {
background: #b2bec3;
cursor: not-allowed;
box-shadow: none;
}
#result-display {
margin-top: 20px;
height: 30px;
font-size: 22px;
font-weight: bold;
color: #2d3436;
text-align: center;
}
</style>
</head>
<body>
<h1> AI 项目抽签</h1>
<div class="wheel-wrapper">
<div class="pointer"></div>
<canvas id="wheel" width="800" height="800"></canvas>
<div class="center-dot"></div>
</div>
<button id="spinBtn" onclick="startSpin()">开始抽签</button>
<div id="result-display"></div>
<script>
// 配置项
const items = [
"Gemini 3",
"Claude Opus 4.1",
"GPT-5.1",
"DeepSeek V3",
"Kimi K2",
"MiniMax 2",
"Doubao 1.6",
"Qwen3 Max"
];
// 更加和谐的配色方案
const colors = [
"#FF6B6B", // 红
"#4ECDC4", // 青
"#45B7D1", // 蓝
"#FFA502", // 橙
"#A3CB38", // 绿
"#12CBC4", // 浅青
"#D980FA", // 紫
"#9980FA" // 蓝紫
];
const canvas = document.getElementById('wheel');
const ctx = canvas.getContext('2d');
const spinBtn = document.getElementById('spinBtn');
const resultDisplay = document.getElementById('result-display');
let currentRotation = 0; // 记录当前的旋转角度
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = canvas.width / 2;
const step = (2 * Math.PI) / items.length; // 每个扇区的弧度
// 绘制转盘函数
function drawWheel() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < items.length; i++) {
// 1. 绘制扇形
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.arc(centerX, centerY, radius, i * step, (i + 1) * step);
ctx.lineTo(centerX, centerY);
ctx.fillStyle = colors[i % colors.length];
ctx.fill();
ctx.stroke(); // 加个边框防止锯齿
// 2. 绘制文字
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(i * step + step / 2); // 旋转到扇形中心
ctx.textAlign = "right";
ctx.fillStyle = "#fff";
ctx.font = "bold 38px Arial";
ctx.shadowColor = "rgba(0,0,0,0.3)";
ctx.shadowBlur = 4;
// 这里的 30 是距离边缘的距离
ctx.fillText(items[i], radius - 30, 14);
ctx.restore();
}
}
// 初始化绘制
drawWheel();
function startSpin() {
if (spinBtn.disabled) return;
// 1. 锁定按钮
spinBtn.disabled = true;
resultDisplay.innerText = " 正在抽取...";
// 2. 决定赢家 (0 - 7)
const winningIndex = Math.floor(Math.random() * items.length);
// 3. 计算旋转逻辑
// 基础旋转：至少转 5 圈 (360 * 5)
const baseSpins = 360 * 5;
// 计算每个扇区的角度 (360 / 8 = 45度)
const sectorDegree = 360 / items.length;
// 指针在正上方 (270度位置，或者理解为0度如果是CSS rotate)
// Canvas 0度在右边(3点钟)，顺时针增加。
// 为了简化，我们反推：
// 如果我们要让 index 0 中奖，它在 Canvas 上是 0-45度。
// 我们需要让它的中心 (22.5度) 转到顶部的指针位置 (270度)。
// 需要旋转: 270 - 22.5 = 247.5 度。
// 目标角度计算公式：
// 目标位置 = 270度 (CSS视觉上的顶部)
// 扇区中心 = index * sectorDegree + sectorDegree / 2
// 需要转动的角度 = 目标位置 - 扇区中心
// 加上基础圈数，并减去当前已经转过的角度取模，确保是累加旋转
// 为了让它看起来随机一点，我们在扇区内加入 ±15 度的随机偏移
const randomOffset = Math.floor(Math.random() * 30) - 15;
// 目标指向的具体角度
const targetAngle = 270 - (winningIndex * sectorDegree + sectorDegree / 2) + randomOffset;
// 计算总共需要旋转的绝对角度
// 下一次旋转的终点 = 当前角度 + 基础圈数 + (目标角度调整值)
// 为了平滑衔接，我们只往一个方向加
const totalDegree = currentRotation + baseSpins + (360 - (currentRotation % 360)) + targetAngle;
// 更新全局旋转变量
currentRotation = totalDegree;
// 4. 应用 CSS 动画
canvas.style.transform = `rotate(${currentRotation}deg)`;
// 5. 监听动画结束 (5秒后)
setTimeout(() => {
spinBtn.disabled = false;
const winner = items[winningIndex];
resultDisplay.innerText = ` 选中项目：${winner}`;
// 稍微延迟一点弹窗，体验更好
setTimeout(() => {
alert(`恭喜！抽签结果是：\n\n✨ ${winner} ✨`);
}, 100);
}, 5000); // 必须与 CSS transition 时间一致
}
</script>
</body>
</html>
创建在线AI聊天应用
输出
gemini.google.com/share/b9890…
提示词
A web app that hooks up to the user's camera that lets users record videos of themselves talking to the camera. The AI should display good prompts (questions) to get the user's creative juices flowing so they know what to talk about.
After recording, the user should be able to download the video as a mp4 file.
Also allow the user to choose dimension of video (9:16, 16:9, 3:4, 1:1).
Have Gemini actively listen in on what the user is saying and jump in with live questions at various points (as overlay text only, no audio) so the user is never stuck, so it's like the AI is a video podcast host interviewing the user.
Use pastel colors and make the design classy. Make sure the UI auto-adjusts for all video layouts.
