使用ollama 搭建 deepseek-R1 离线模型（有可视化界面&手机端访问
使用ollama 搭建 deepseek-R1 离线模型（有可视化界面&手机端访问）
创建时间：20250219
一、ollama 安装 和设置模型路径
1.1 下载安装，这个没啥说的。
网址：
https://ollama.com/download
1.2 设置模型路径
模型 是默认下载在c盘的。 C盘小的不好操作。我们可以将模型下载在其他地方
转移教程：
https://blog.csdn.net/qq_40064717/article/details/145406752
简单说一下：
在模型的需要安装的地方创建一个文件夹。
然后复制路径。
在环境变量将这个路径处理一下。 见下面 ↓
用户变量和环境变量没得啥子区别，都行
1.3 需要设置外网&局域网访问（不需要不用做）
设置的参照链接：
https://blog.csdn.net/weixin_46759000/article/details/142175930
和上面差不多。
1.4 安装 Cpolar Web UI 。（不需要不用做）
外网映射的 不需要手机使用和不需要外网不用安装
地址：免费的，安装即可
https://www.cpolar.com/download
二、安装模型
2.1 寻找合适的模型
一般来说 先搞个1.5b 看跑起来效果，然后在依次往上试试。
看自己的显存 是多少，然后对应安装几b的模型即可。 1.5b --- 显存1-2G 7b ---- 显存至少 7G ------》
我的是3060 12G 32运行内存 。按道理可以安装32b的，目前仅仅安装了8B ，
这里演示我安装1.5b模型。
网址：
https://ollama.com/search
点进去 选择模型大小。 复制命令
2.2 安装模型
打开终端。
win + r ====》 cmd 回车
or
找到终端 打开
or
随便一个文件夹，地址输入cmd 回车
验证一下安装是否成功
C:\Users\Administrator>ollama -v
ollama version is 0.5.7
运行刚刚复制的命令
ollama run deepseek-r1
等待安装成功 出现 success 即可对话
2.3 尝试对话。
>>> 你是谁？
<think>
</think>
您好！我是由中国的深度求索（DeepSeek）公司开发的智能助手DeepSeek-R1。如您有任何任何问题，我会尽我所能为您提供帮助。
>>> 使用html+css+JavaScript 写一个炫酷的时钟
<think>
嗯，用户之前问过“是谁？”，现在又问如何用HTML、CSS和JavaScript做一个炫酷的时钟。看起来他可能对之前的回答不是很满意
，或者想要更详细的内容。
首先，我需要分析他的需求。他想做一个时钟，要求是炫酷的，并且使用三种技术组合来实现。这说明他对外观有较高要求，可能想
要动态效果、LED灯光和高饱和度的颜色。
接下来，我会考虑用户的技术水平。他提到了HTML、CSS和JavaScript，但可能对于这些技术的高级应用还不熟悉，所以我需要提供
一个相对简单易懂且完整的工作原理的示例。
然后，我会思考如何结合这三种技术来实现时钟的效果。比如，使用JavaScript生成 HTML 元素，动态更新时间，同时用 CSS 实现
LED灯效果和动画效果。这样可以让时钟看起来更有趣，更具现代感。
我还需要确保提供的代码是完整的，并且易于用户复制粘贴运行。因此，在代码中加入了一些可调整的参数，比如颜色、闪烁次数等
，让用户可以根据自己的喜好进行修改。
最后，我会加上注释，解释每个部分的功能，帮助用户理解如何使用和优化这个示例。这样用户不仅能得到一个功能正常的时钟，还
能学习到相关的技术应用。
</think>
以下是一个使用 HTML、CSS 和 JavaScript 创建炫酷时钟的完整代码示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>炫酷时钟</title>
<style>
body {
background: #1a1a1a;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
overflow: hidden;
}
.clock {
width: 60px;
height: 60px;
border-radius: 50%;
position: relative;
font-family: Arial, sans-serif;
color: #fff;
}
.center {
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
margin: 20px auto;
}
.led {
width: 60px;
height: 60px;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
background: #1a1a1a;
pointer-events: none;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}
.second {
animation: spin 60s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.minute {
opacity: 0.5;
}
.hour {
margin-left: -2px;
font-size: 1.5rem;
opacity: 0.8;
}
.second::before {
content: '';
position: absolute;
top: 0;
left: 49%;
width: 3px;
height: 60px;
background: #fff;
transform: translateX(-50%);
}
.minute::before {
content: '';
position: absolute;
top: -20px;
left: 10px;
width: 40px;
height: 3px;
background: #fff;
}
.hour::before {
content: '';
position: absolute;
bottom: -8px;
right: -8px;
width: 6px;
height: 20px;
background: #fff;
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="clock">
<div class="center"></div>
<div class="led"
id="second"
style="left: 100%;"
></div>
<div class="led"
id="minute"
style="left: 80%;"
></div>
<div class="led"
id="hour"
style="left: 65%;"
></div>
</div>
<script>
const clock = document.querySelector('.clock');
function updateTime() {
const now = new Date();
// 第一根指针（秒针）
document.getElementById('second').style.left = `${now.getSeconds() * 1.05}%;`
// 第二根指针（分针）
document.getElementById('minute').style.left = `${now.getMinutes() * 2.96}%;`
// 第三根指针（时针）
const hour = now.getHours() % 12;
const theta = (hour + now.getMinutes() / 60) * 30;
document.getElementById('hour').style.left = `${theta - 45}%;`
}
function toggle LED() {
const leds = document.querySelectorAll('.led');
leds.forEach(led => {
led.style.backgroundColor =
led.style.backgroundColor === '#1a1a1a' ?
'white' : 'rgba(255, 255, 255, 0.3)';
});
}
function create_LEDeffect() {
const leds = document.querySelectorAll('.led');
leds.forEach(led => {
led.style.left = `${100 -led.offsetWidth * 3}%;`;
led.addEventListener('mousemove', (e) => {
if (e.target.classList.contains('second')) {
const seconds = document.getElementById('second').textContent;
led.style.left = `${seconds.replace('%', '')}%`;
} else if (e.target.classList.contains('minute')) {
const minutes = document.getElementById('minute').textContent;
led.style.left = `${minutes.replace('%', '')}%`;
} else if (e.target.classList.contains('hour')) {
const hours = document.getElementById('hour').textContent;
led.style.left = `${hours.replace('%', '')}%`;
}
});
// 添加闪烁效果
led.addEventListener('click', () => {
led.style.transition = 'opacity 0.3s';
setTimeout(() => {
led.style.backgroundColor =
led.style.backgroundColor === '#fff' ?
'rgba(255, 255, 255, 0.3)' :
'white';
}, 10);
});
});
}
// 初始闪烁
document.querySelectorAll('.led').forEach(led => {
led.style.backgroundColor =
led.style.backgroundColor === '#fff' ?
'rgba(255, 255, 255, 0.3)' :
'white';
});
// 每隔1秒更新时间
setInterval(updateTime, 1000);
create_LEDeffect();
</script>
</body>
</html>
```
这个时钟的亮点包括：
1. 高饱和度的红色LED灯条效果，模拟LED灯管闪烁
2. 动态角度设置
3. 三个指针（秒、分、小时）动态显示
4. 闪烁 animations
5. 随机的闪烁效果
代码解释：
1. `HTML` 部分定义了时钟的基本结构，包括中心点和LED灯条。
2. `CSS` 定义了样式，包括颜色、大小、位置等。特别注意 `.led` 类型元素的样式，模拟LED效果。
3. `JavaScript` 主要负责动态更新时间，并创建LED灯条的闪烁动画。
运行这个代码，你会看到一个带有闪烁LED灯条的时钟，三个指针动态转动，整体视觉效果非常炫酷。
要使用这个代码，只需要将它保存为一个`.html`文件并打开浏览器即可。
>>>
时钟有问题
三、可视化界面
3.1 下载 Chatbox 后安装
https://chatboxai.app/zh
手机下载apk
电脑下载 后安装。
下载安装这个大家都熟，
3.2 打开软件，按照下面进行设置
3.3 进行对话测试
3.4 设置外网映射
打开 Cpolar Web UI 软件。 进行设置
找到映射的地址
访问地址出现 即映射成功
3.5 手机设置
3.6 手机对话
四、其他的
4.1 内网穿透
这个工具其他端口也可以使用，本地的端口直接映射， 其他即可访问。
一些80 端口，一些python flask 项目都可以使用。方便。
4.2 ollama
这个还能下载其他的模型。qianwen 等，也可以试一下，
这个其实不用Gpu 都能跑起来 。吃cpu也行。之前在32G内存电脑，没显卡。
能带到qainwen模型。小的
4.3 chatbox
这个工具也可以喂养一些数据，做本地的模型。之后可能会出一个博客关于这个的。感兴趣的可以留意一下。
还有其他的工具和这个也大同小异，主要是这个有手机端，可以给朋友使用。
AnythingLLM
GPT4All
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）