用HTML5实现实时ASCII艺术摄像头

用HTML5实现实时ASCII艺术摄像头

项目简介

这是一个将摄像头画面实时转换为ASCII字符艺术的Web应用，基于HTML5和原生JavaScript实现。通过本项目可以学习到：

  • 浏览器摄像头API的使用
  • Canvas图像处理技术
  • 实时视频流处理
  • 复杂DOM操作
  • 性能优化技巧

功能亮点

✨ 七大特色功能：

  1. 多模式字符渲染：支持8种字符集，从经典ASCII到Emoji
  2. 动态调色板：6种预设颜色方案+彩虹渐变效果
  3. 专业级图像处理：亮度/对比度调节、模糊、噪点等特效
  4. 分辨率控制：20-120级精细调节
  5. 实时特效面板：5种视觉特效独立控制
  6. 性能监控：实时显示FPS和分辨率
  7. 数据持久化：支持艺术作品的保存与分享

实现原理

1. 技术架构
摄像头视频流
Canvas图像捕获
图像处理管道
亮度/对比度调整
特效叠加
ASCII转换
DOM实时渲染
交互控制面板

2. 核心算法

像素到ASCII的转换公式：

def pixel_to_ascii(r, g, b, chars):brightness = 0.299*r + 0.587*g + 0.114*b  # 感知亮度计算index = int(brightness / 255 * (len(chars)-1)) return chars[index]

彩虹色生成算法：

function getRainbowColor(offset) {const hue = (offset % 360) / 60;const i = Math.floor(hue);const f = hue - i;const p = 0;const q = 255 * (1 - f);const t = 255 * f;const rgb = [[255, t, p],[q, 255, p],[p, 255, t],[p, q, 255],[t, p, 255],[255, p, q]][i % 6];return `rgb(${rgb[0]},${rgb[1]},${rgb[2]})`;
}

关键代码解析

1. 视频流处理

// 获取摄像头访问权限
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {const video = document.createElement('video');video.srcObject = stream;video.autoplay = true;// 创建双缓冲Canvasconst mainCanvas = document.createElement('canvas');const tempCanvas = document.createElement('canvas');video.onplaying = () => {// 设置动态分辨率mainCanvas.width = config.width;mainCanvas.height = config.height;tempCanvas.width = config.width;tempCanvas.height = config.height;// 启动渲染循环requestAnimationFrame(renderFrame);};});

2. 实时渲染引擎

function renderFrame() {// 镜像处理if (config.mirror) {ctx.save();ctx.scale(-1, 1);ctx.drawImage(video, -canvas.width, 0);ctx.restore();} else {ctx.drawImage(video, 0, 0);}// 应用图像处理管线applyEffectsPipeline();// 转换ASCII字符const imgData = ctx.getImageData(0, 0, width, height);let asciiArt = generateAscii(imgData);// 动态颜色处理if (config.color === 'rainbow') {asciiArt = applyRainbowEffect(asciiArt);}// DOM更新asciiDisplay.textContent = asciiArt;
}

3. 特效系统设计

class EffectPipeline {constructor() {this.effects = [];}addEffect(effect) {this.effects.push(effect);}process(imageData) {return this.effects.reduce((data, effect) => {return effect.apply(data);}, imageData);}
}// 示例噪点特效
class NoiseEffect {constructor(intensity) {this.intensity = intensity;}apply(imageData) {const data = new Uint8Array(imageData.data);for (let i = 0; i < data.length; i += 4) {const noise = Math.random() * this.intensity * 255;data[i] += noise;    // Rdata[i+1] += noise;  // Gdata[i+2] += noise;  // B}return imageData;}
}

参数调节建议：

场景推荐设置
人脸识别高分辨率 + 标准字符集
艺术创作低分辨率 + 月亮字符集 + 高噪点
动态捕捉中分辨率 + 二进制字符 + 高对比度

性能优化

  1. 双缓冲技术：使用临时Canvas避免直接修改源数据
  2. 节流渲染：根据FPS自动调整刷新频率
  3. Web Worker：将图像处理逻辑移至后台线程
  4. 内存复用：重复使用ImageData对象
  5. 惰性计算：仅在参数变化时重新生成字符映射表

扩展方向

🚀 二次开发建议：

  • 添加视频滤镜系统
  • 集成语音控制功能
  • 实现WebSocket多人共享视图
  • 开发Chrome扩展版本
  • 添加AR标记识别功能

完整代码实现：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>终极ASCII艺术摄像头</title><style>:root {--primary-color: #0f0;--bg-color: #121212;--control-bg: #222;}body {background-color: var(--bg-color);color: var(--primary-color);font-family: 'Courier New', monospace;display: flex;flex-direction: column;justify-content: center;align-items: center;min-height: 100vh;margin: 0;overflow-x: hidden;transition: all 0.3s;}header {text-align: center;margin-bottom: 20px;width: 100%;}h1 {font-size: 2.5rem;margin: 0;text-shadow: 0 0 10px currentColor;letter-spacing: 3px;}.subtitle {font-size: 0.9rem;opacity: 0.7;margin-top: 5px;}#asciiContainer {position: relative;margin: 20px 0;border: 1px solid var(--primary-color);box-shadow: 0 0 20px rgba(0, 255, 0, 0.3);max-width: 90vw;overflow: auto;}#asciiCam {font-size: 10px;line-height: 10px;white-space: pre;letter-spacing: 2px;text-shadow: 0 0 5px currentColor;margin: 0;padding: 10px;transition: all 0.3s;}.controls {display: flex;flex-wrap: wrap;justify-content: center;gap: 15px;margin: 20px 0;padding: 15px;background: var(--control-bg);border-radius: 8px;max-width: 90vw;}.control-group {display: flex;flex-direction: column;min-width: 150px;}.control-group label {margin-bottom: 5px;font-size: 0.9rem;}select, button, input {background: var(--control-bg);color: var(--primary-color);border: 1px solid var(--primary-color);padding: 8px 12px;font-family: inherit;border-radius: 4px;transition: all 0.3s;}select {cursor: pointer;}button {cursor: pointer;min-width: 100px;}button:hover, select:hover {background: var(--primary-color);color: #000;}input[type="range"] {-webkit-appearance: none;height: 5px;background: var(--control-bg);margin-top: 10px;}input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;width: 15px;height: 15px;background: var(--primary-color);border-radius: 50%;cursor: pointer;}.stats {position: absolute;top: 10px;right: 10px;background: rgba(0, 0, 0, 0.7);padding: 5px 10px;border-radius: 4px;font-size: 0.8rem;}.fullscreen-btn {position: absolute;top: 10px;left: 10px;background: rgba(0, 0, 0, 0.7);border: none;width: 30px;height: 30px;display: flex;align-items: center;justify-content: center;cursor: pointer;border-radius: 4px;font-size: 16px;}.effects-panel {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background: var(--control-bg);padding: 20px;border-radius: 8px;z-index: 100;box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);max-width: 80vw;}.effects-panel.active {display: block;}.close-panel {position: absolute;top: 10px;right: 10px;background: none;border: none;color: var(--primary-color);font-size: 20px;cursor: pointer;}.effect-option {margin: 10px 0;}.save-btn {background: #4CAF50;color: white;margin-top: 10px;}footer {margin-top: 20px;font-size: 0.8rem;opacity: 0.7;text-align: center;}@media (max-width: 768px) {.controls {flex-direction: column;align-items: center;}h1 {font-size: 1.8rem;}}</style>
</head>
<body><header><h1>终极ASCII艺术摄像头</h1><div class="subtitle">实时视频转ASCII艺术 - 高级版</div></header><div id="asciiContainer"><button class="fullscreen-btn" id="fullscreenBtn">⛶</button><div class="stats" id="stats">FPS: 0 | 分辨率: 0x0</div><pre id="asciiCam">正在初始化摄像头...</pre></div><div class="controls"><div class="control-group"><label for="charSet">字符集</label><select id="charSet"><option value="@%#*+=-:. ">标准</option><option value="01">二进制</option><option value="█▓▒░ ">方块</option><option value="♠♥♦♣♤♡♢♧">扑克</option><option value="☯☮✝☪✡☸✠">符号</option><option value="🌑🌒🌓🌔🌕🌖🌗🌘">月亮</option><option value="▁▂▃▄▅▆▇█">柱状</option><option value="🟥🟧🟨🟩🟦🟪">彩色块</option></select></div><div class="control-group"><label for="colorScheme">颜色主题</label><select id="colorScheme"><option value="#0f0">矩阵绿</option><option value="#f00">霓虹红</option><option value="#0ff">赛博蓝</option><option value="#ff0">荧光黄</option><option value="#f0f">粉紫</option><option value="#fff">纯白</option><option value="rainbow">彩虹</option></select></div><div class="control-group"><label for="resolution">分辨率</label><input type="range" id="resolution" min="20" max="120" value="60"><div id="resolutionValue">60</div></div><div class="control-group"><label for="brightness">亮度</label><input type="range" id="brightness" min="0" max="200" value="100"><div id="brightnessValue">100%</div></div><div class="control-group"><label for="contrast">对比度</label><input type="range" id="contrast" min="0" max="200" value="100"><div id="contrastValue">100%</div></div><button id="invertBtn">反色</button><button id="mirrorBtn">镜像</button><button id="pauseBtn">暂停</button><button id="effectsBtn">特效</button><button id="saveBtn" class="save-btn">保存</button></div><div class="effects-panel" id="effectsPanel"><button class="close-panel" id="closePanel">×</button><h2>特效设置</h2><div class="effect-option"><label for="effectBlur">模糊效果</label><input type="range" id="effectBlur" min="0" max="10" value="0"><div id="effectBlurValue">0</div></div><div class="effect-option"><label for="effectNoise">噪点强度</label><input type="range" id="effectNoise" min="0" max="100" value="0"><div id="effectNoiseValue">0%</div></div><div class="effect-option"><label for="effectScanlines">扫描线</label><input type="range" id="effectScanlines" min="0" max="100" value="0"><div id="effectScanlinesValue">0%</div></div><div class="effect-option"><label for="effectGlitch">故障效果</label><input type="range" id="effectGlitch" min="0" max="100" value="0"><div id="effectGlitchValue">0%</div></div><div class="effect-option"><label for="effectPixelate">像素化</label><input type="range" id="effectPixelate" min="0" max="100" value="0"><div id="effectPixelateValue">0%</div></div><button id="applyEffects" class="save-btn">应用特效</button></div><footer>ASCII艺术摄像头 v2.0 | 使用HTML5和JavaScript构建</footer><script>// 配置对象const config = {chars: '@%#*+=-:. ',color: '#0f0',width: 60,height: 40,invert: false,mirror: true,paused: false,brightness: 100,contrast: 100,effects: {blur: 0,noise: 0,scanlines: 0,glitch: 0,pixelate: 0},lastTime: 0,frameCount: 0,fps: 0,rainbowOffset: 0};// DOM元素const elements = {asciiCam: document.getElementById('asciiCam'),asciiContainer: document.getElementById('asciiContainer'),stats: document.getElementById('stats'),fullscreenBtn: document.getElementById('fullscreenBtn'),charSet: document.getElementById('charSet'),colorScheme: document.getElementById('colorScheme'),resolution: document.getElementById('resolution'),resolutionValue: document.getElementById('resolutionValue'),brightness: document.getElementById('brightness'),brightnessValue: document.getElementById('brightnessValue'),contrast: document.getElementById('contrast'),contrastValue: document.getElementById('contrastValue'),invertBtn: document.getElementById('invertBtn'),mirrorBtn: document.getElementById('mirrorBtn'),pauseBtn: document.getElementById('pauseBtn'),effectsBtn: document.getElementById('effectsBtn'),saveBtn: document.getElementById('saveBtn'),effectsPanel: document.getElementById('effectsPanel'),closePanel: document.getElementById('closePanel'),effectBlur: document.getElementById('effectBlur'),effectBlurValue: document.getElementById('effectBlurValue'),effectNoise: document.getElementById('effectNoise'),effectNoiseValue: document.getElementById('effectNoiseValue'),effectScanlines: document.getElementById('effectScanlines'),effectScanlinesValue: document.getElementById('effectScanlinesValue'),effectGlitch: document.getElementById('effectGlitch'),effectGlitchValue: document.getElementById('effectGlitchValue'),effectPixelate: document.getElementById('effectPixelate'),effectPixelateValue: document.getElementById('effectPixelateValue'),applyEffects: document.getElementById('applyEffects')};// 视频和画布元素let video;let canvas;let ctx;let tempCanvas;let tempCtx;let animationId;// 初始化函数function init() {setupEventListeners();initCamera();}// 设置事件监听器function setupEventListeners() {// 控制面板事件elements.charSet.addEventListener('change', () => {config.chars = elements.charSet.value;});elements.colorScheme.addEventListener('change', () => {config.color = elements.colorScheme.value;updateColorScheme();});elements.resolution.addEventListener('input', () => {const value = elements.resolution.value;elements.resolutionValue.textContent = value;config.width = value * 1.5;config.height = value;});elements.brightness.addEventListener('input', () => {const value = elements.brightness.value;elements.brightnessValue.textContent = `${value}%`;config.brightness = value;});elements.contrast.addEventListener('input', () => {const value = elements.contrast.value;elements.contrastValue.textContent = `${value}%`;config.contrast = value;});elements.invertBtn.addEventListener('click', () => {config.invert = !config.invert;elements.invertBtn.textContent = config.invert ? '正常' : '反色';});elements.mirrorBtn.addEventListener('click', () => {config.mirror = !config.mirror;elements.mirrorBtn.textContent = config.mirror ? '镜像' : '原始';});elements.pauseBtn.addEventListener('click', () => {config.paused = !config.paused;elements.pauseBtn.textContent = config.paused ? '继续' : '暂停';});elements.effectsBtn.addEventListener('click', () => {elements.effectsPanel.classList.add('active');});elements.closePanel.addEventListener('click', () => {elements.effectsPanel.classList.remove('active');});elements.applyEffects.addEventListener('click', () => {elements.effectsPanel.classList.remove('active');});// 特效控制elements.effectBlur.addEventListener('input', () => {const value = elements.effectBlur.value;elements.effectBlurValue.textContent = value;config.effects.blur = value;});elements.effectNoise.addEventListener('input', () => {const value = elements.effectNoise.value;elements.effectNoiseValue.textContent = `${value}%`;config.effects.noise = value;});elements.effectScanlines.addEventListener('input', () => {const value = elements.effectScanlines.value;elements.effectScanlinesValue.textContent = `${value}%`;config.effects.scanlines = value;});elements.effectGlitch.addEventListener('input', () => {const value = elements.effectGlitch.value;elements.effectGlitchValue.textContent = `${value}%`;config.effects.glitch = value;});elements.effectPixelate.addEventListener('input', () => {const value = elements.effectPixelate.value;elements.effectPixelateValue.textContent = `${value}%`;config.effects.pixelate = value;});// 全屏按钮elements.fullscreenBtn.addEventListener('click', toggleFullscreen);// 保存按钮elements.saveBtn.addEventListener('click', saveAsciiArt);}// 初始化摄像头function initCamera() {navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {video = document.createElement('video');video.srcObject = stream;video.autoplay = true;// 创建主画布canvas = document.createElement('canvas');ctx = canvas.getContext('2d');// 创建临时画布用于特效处理tempCanvas = document.createElement('canvas');tempCtx = tempCanvas.getContext('2d');video.onplaying = startRendering;}).catch(err => {elements.asciiCam.textContent = `错误: ${err.message}\n请确保已授予摄像头权限`;console.error('摄像头错误:', err);});}// 开始渲染function startRendering() {updateResolution();animate();}// 动画循环function animate() {const now = performance.now();config.frameCount++;// 更新FPS计数if (now - config.lastTime >= 1000) {config.fps = config.frameCount;elements.stats.textContent = `FPS: ${config.fps} | 分辨率: ${config.width}x${config.height}`;config.frameCount = 0;config.lastTime = now;}// 彩虹效果偏移if (config.color === 'rainbow') {config.rainbowOffset = (config.rainbowOffset + 1) % 360;}if (!config.paused) {renderFrame();}animationId = requestAnimationFrame(animate);}// 渲染帧function renderFrame() {// 设置画布尺寸canvas.width = config.width;canvas.height = config.height;tempCanvas.width = canvas.width;tempCanvas.height = canvas.height;// 绘制原始视频帧if (config.mirror) {ctx.save();ctx.scale(-1, 1);ctx.drawImage(video, -canvas.width, 0, canvas.width, canvas.height);ctx.restore();} else {ctx.drawImage(video, 0, 0, canvas.width, canvas.height);}// 应用图像处理效果applyImageEffects();// 获取像素数据const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;let ascii = '';// 转换为ASCIIfor (let y = 0; y < canvas.height; y++) {for (let x = 0; x < canvas.width; x++) {const i = (y * canvas.width + x) * 4;const r = imgData[i];const g = imgData[i + 1];const b = imgData[i + 2];// 计算亮度 (使用感知亮度公式)let brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;// 应用对比度brightness = ((brightness - 0.5) * (config.contrast / 100)) + 0.5;// 应用亮度brightness = brightness * (config.brightness / 100);// 限制在0-1范围内brightness = Math.max(0, Math.min(1, brightness));// 根据亮度选择字符let charIndex = Math.floor(brightness * (config.chars.length - 1));if (config.invert) {charIndex = config.chars.length - 1 - charIndex;}// 确保索引在有效范围内charIndex = Math.max(0, Math.min(config.chars.length - 1, charIndex));ascii += config.chars[charIndex];}ascii += '\n';}// 更新显示elements.asciiCam.textContent = ascii;}// 应用图像处理效果function applyImageEffects() {// 复制原始图像到临时画布tempCtx.drawImage(canvas, 0, 0);// 应用模糊效果if (config.effects.blur > 0) {ctx.filter = `blur(${config.effects.blur}px)`;ctx.drawImage(tempCanvas, 0, 0);ctx.filter = 'none';}// 应用噪点效果if (config.effects.noise > 0) {const noiseData = ctx.getImageData(0, 0, canvas.width, canvas.height);const data = noiseData.data;const intensity = config.effects.noise / 100;for (let i = 0; i < data.length; i += 4) {const noise = (Math.random() - 0.5) * 255 * intensity;data[i] += noise;     // Rdata[i + 1] += noise; // Gdata[i + 2] += noise; // B}ctx.putImageData(noiseData, 0, 0);}// 应用扫描线效果if (config.effects.scanlines > 0) {const intensity = config.effects.scanlines / 100;for (let y = 0; y < canvas.height; y += 2) {ctx.fillStyle = `rgba(0, 0, 0, ${intensity})`;ctx.fillRect(0, y, canvas.width, 1);}}// 应用故障效果if (config.effects.glitch > 0 && Math.random() < config.effects.glitch / 100) {const glitchAmount = Math.floor(Math.random() * 10 * (config.effects.glitch / 100));const glitchData = ctx.getImageData(0, 0, canvas.width, canvas.height);const tempData = ctx.getImageData(0, 0, canvas.width, canvas.height);// 水平偏移for (let y = 0; y < canvas.height; y++) {const offset = Math.floor(Math.random() * glitchAmount * 2) - glitchAmount;if (offset !== 0) {for (let x = 0; x < canvas.width; x++) {const srcX = Math.max(0, Math.min(canvas.width - 1, x + offset));const srcPos = (y * canvas.width + srcX) * 4;const dstPos = (y * canvas.width + x) * 4;tempData.data[dstPos] = glitchData.data[srcPos];tempData.data[dstPos + 1] = glitchData.data[srcPos + 1];tempData.data[dstPos + 2] = glitchData.data[srcPos + 2];}}}ctx.putImageData(tempData, 0, 0);}// 应用像素化效果if (config.effects.pixelate > 0) {const size = Math.max(1, Math.floor(config.effects.pixelate / 10));if (size > 1) {const smallWidth = Math.floor(canvas.width / size);const smallHeight = Math.floor(canvas.height / size);tempCtx.drawImage(canvas, 0, 0, smallWidth, smallHeight);ctx.imageSmoothingEnabled = false;ctx.drawImage(tempCanvas, 0, 0, smallWidth, smallHeight, 0, 0, canvas.width, canvas.height);ctx.imageSmoothingEnabled = true;}}}// 更新分辨率function updateResolution() {const value = elements.resolution.value;elements.resolutionValue.textContent = value;config.width = value * 1.5;config.height = value;}// 更新颜色方案function updateColorScheme() {if (config.color === 'rainbow') {// 彩虹色不需要更新样式，因为它在动画循环中处理return;}document.documentElement.style.setProperty('--primary-color', config.color);elements.asciiCam.style.color = config.color;}// 切换全屏function toggleFullscreen() {if (!document.fullscreenElement) {elements.asciiContainer.requestFullscreen().catch(err => {console.error('全屏错误:', err);});} else {document.exitFullscreen();}}// 保存ASCII艺术function saveAsciiArt() {const blob = new Blob([elements.asciiCam.textContent], { type: 'text/plain' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = `ascii-art-${new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-')}.txt`;document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(url);}// 启动应用init();// 清理资源window.addEventListener('beforeunload', () => {if (animationId) cancelAnimationFrame(animationId);if (video && video.srcObject) {video.srcObject.getTracks().forEach(track => track.stop());}});</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.pswp.cn/web/81244.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

论文审稿之我对SCI写作的思考

论文审稿之我对SCI写作的思考

有幸被邀请审过二区、三区、四区期刊的论文&#xff0c;近期审稿10余篇&#xff0c;分享一下我从一个审稿人的角度出发&#xff0c;如何提升自己写作的质量。 作图高清和好看&#xff0c;永远是排第一位。图中的字要清晰&#xff0c;有的放大200%还看不清字&#xff1b;每幅图的…
阅读更多...
MLA：Transformer的智能变形金刚——解密多头潜在注意力的进化密码

MLA：Transformer的智能变形金刚——解密多头潜在注意力的进化密码

第一章 MLA的进化之路&#xff1a;从MHA到智能变形 1.1 变形金刚的诞生背景 当LLM模型规模突破万亿参数量级时&#xff0c;传统Transformer的注意力机制开始显现"成长的烦恼"&#xff1a;训练阶段计算密集、推理阶段内存吃紧。DeepSeek团队的MLA如同给注意力模块装…
阅读更多...
电子电路：电学都有哪些核心概念？

电子电路：电学都有哪些核心概念？

电子是基本粒子，带负电荷。电荷是物质的一种属性，电子带有负电荷，而质子带有正电荷。电荷的单位是库仑。 电流呢，应该是指电荷的流动，单位是安培，也就是库仑每秒。所以电流其实就是电荷在导体中的移动形成的。比如，当电子在导线中流动时，就形成了电流。不过要注意，传…
阅读更多...
第三次中医知识问答模型微调

第三次中医知识问答模型微调

本次参数 llamafactory-cli train \ --stage sft \ --do_train True \ --model_name_or_path /home/qhyz/zxy/LLaMA-Factory/model \ --preprocessing_num_workers 16 \ --finetuning_type lora \ --template deepseek3 \ --flash_attn fa2 \ --dataset_dir data \ --dataset …
阅读更多...
leetcode2081. k 镜像数字的和-hard

leetcode2081. k 镜像数字的和-hard

1 题目&#xff1a;k 镜像数字的和 官方标定难度&#xff1a;难 一个 k 镜像数字 指的是一个在十进制和 k 进制下从前往后读和从后往前读都一样的 没有前导 0 的 正 整数。 比方说&#xff0c;9 是一个 2 镜像数字。9 在十进制下为 9 &#xff0c;二进制下为 1001 &#xff…
阅读更多...
计算机网络学习（七）——IP

计算机网络学习（七）——IP

一、IP 在计算机网络中&#xff0c;IP&#xff08;Internet Protocol&#xff0c;网际协议&#xff09;是网络层的核心协议&#xff0c;用于实现跨越不同网络的数据包传输。IP 是 TCP/IP 协议族的核心部分&#xff0c;属于网络层协议&#xff0c;也是 Internet 赖以运作的基础…
阅读更多...
【技术追踪】ADDP：通过交替去噪扩散过程学习用于图像识别和生成的通用表示（ICLR-2024）

【技术追踪】ADDP：通过交替去噪扩散过程学习用于图像识别和生成的通用表示（ICLR-2024）

扩散模型交替去噪&#xff1a;助力图像识别与图像生成~ 论文&#xff1a;ADDP: Learning General Representations for Image Recognition and Generation with Alternating Denoising Diffusion Process 代码&#xff1a;https://github.com/ChangyaoTian/ADDP 0、摘要 图像识…
阅读更多...
在Linux上安装Miniconda

在Linux上安装Miniconda

在Linux上安装Anaconda或Miniconda&#xff08;轻量级版本&#xff09; 选择安装版本 Anaconda&#xff1a; 包含200预装包&#xff08;如NumPy、Pandas、TensorFlow等&#xff09;&#xff0c;适合新手或需要完整科学计算环境的用户。 安装包较大&#xff08;约500MB&#xff…
阅读更多...
SRS流媒体服务器之RTC播放环境搭建

SRS流媒体服务器之RTC播放环境搭建

环境概述 srs版本 commit 44f0c36b61bc7c3a1d51cb60be0ec184c840f09d Author: winlin <winlinvip.126.com> Date: Wed Aug 2 10:34:41 2023 0800Release v4.0-r5, 4.0 release5, v4.0.271, 145574 lines. rtc.conf # WebRTC streaming config for SRS. # see full.…
阅读更多...
清山垃圾的3个问题

清山垃圾的3个问题

与一群驴友进山&#xff0c;同步捡拾一路的垃圾&#xff1a;清山行动。 关于垃圾&#xff0c;大家提了3个问题。记录于此&#xff0c;勤于思考&#xff1a;为什么&#xff0c;如何做 问题 - 山里的垃圾有哪些&#xff1f; - 垃圾是谁丢的&#xff1f; - 他们为…
阅读更多...
redis集合类型

redis集合类型

练习命令使用&#xff0c;具体如下&#xff1a; 练习无序集合类型命令 sadd smembers scard srem sinter sunion sdiff sismember srandmember spop 练习有序集合类型命令 无序集合中的每个元素都是不同的&#xff0c;且没有顺序 创建/追加/删除/查看 127.0.0.1:6379>…
阅读更多...
JAVA 包管理

JAVA 包管理

一 、关键点 包声明规则&#xff1a; 每个类首行的package声明必须与文件路径完全匹配com.example.math对应路径com/example/mathorg.demo.greeting对应路径org/demo/greeting 编译参数&#xff1a; -d ./build&#xff1a;指定编译输出目录编译器会自动根据包声明创建对应…
阅读更多...
Linux中的文件系统和软硬连接

Linux中的文件系统和软硬连接

磁盘的访问方式 CHS&#xff08;柱面&#xff0c;磁头&#xff0c;扇区&#xff09; 法&#xff08;磁盘硬件查找&#xff09;&#xff1a; 确定柱面&#xff08;C&#xff09; 磁头臂移动到对应的柱面位置。例如&#xff0c;柱面号为 5&#xff0c;则磁头移动到第 5 个磁道组…
阅读更多...
whisper相关的开源项目 (asr)

whisper相关的开源项目 (asr)

基于 Whisper&#xff08;OpenAI 的开源语音识别模型&#xff09;的开源项目有很多&#xff0c;涵盖了不同应用场景和优化方向。以下是一些值得关注的项目&#xff1a; 1. 核心工具 & 增强版 Whisper OpenAI Whisper 由 OpenAI 开源的通用语音识别模型&#xff0c;支持多语…
阅读更多...
深入解析Spring Boot与JUnit 5集成测试的最佳实践

深入解析Spring Boot与JUnit 5集成测试的最佳实践

深入解析Spring Boot与JUnit 5集成测试的最佳实践 引言 在现代软件开发中&#xff0c;单元测试和集成测试是确保代码质量的重要手段。Spring Boot作为当前最流行的Java Web框架之一&#xff0c;提供了丰富的测试支持。而JUnit 5作为最新的JUnit版本&#xff0c;引入了许多新特…
阅读更多...
gitlab占用内存 优化

gitlab占用内存 优化

优化 GitLab 配置 GitLab 的配置文件可以对内存使用进行优化。 以下是一些优化配置的方法&#xff1a; 1.1 调整 Unicorn&#xff08;或 Puma&#xff09;配置 GitLab 使用 Unicorn&#xff08;旧版&#xff09;或 Puma&#xff08;新版本&#xff09;作为其 Web 服务器。可以…
阅读更多...
视觉语言模型（Vision-Language Model, VLM）的简单介绍

视觉语言模型（Vision-Language Model, VLM）的简单介绍

目录 1. 起源与历史 2. 核心技术与原理 3. 优势 4. 应用领域 5. 技术难点与挑战 6. 学习方法与路径 7. 未来发展方向 8. 总结 1. 起源与历史 起源&#xff1a; 视觉语言模型&#xff08;VLM&#xff09;的起源可以追溯到多模态机器学习的研究。早期的计算机视觉&#…
阅读更多...
关于PHP的详细介绍，结合其核心特点、应用场景及2025年的技术发展趋势，以清晰的结构呈现：

关于PHP的详细介绍，结合其核心特点、应用场景及2025年的技术发展趋势，以清晰的结构呈现：

一、PHP的核心特点 动态脚本语言 语法灵活&#xff1a;支持过程式与面向对象编程&#xff0c;类似C/Java的语法结构&#xff0c;但动态类型特性更接近Python。即时编译&#xff1a;PHP 8.x的JIT&#xff08;Just-In-Time&#xff09;编译器显著提升性能&#xff0c;尤其在数学…
阅读更多...
MCP、MCPHub、A2A、AG-UI概述

MCP、MCPHub、A2A、AG-UI概述

MCP Model Context Protocol&#xff0c;模型上下文协议&#xff0c;Anthropic于2024年开源的标准协议&#xff0c;旨在统一AI模型与数据源的交互方式&#xff0c;提升数据访问的便捷性和可靠性&#xff0c;提供标准化的工具调用、资源管理和提示词功能。 MCP的基本定义&…
阅读更多...
[学习]浅谈C++异常处理（代码示例）

[学习]浅谈C++异常处理（代码示例）

浅谈C异常处理 文章目录 浅谈C异常处理一、异常处理基础1.异常的概念与作用2.C异常处理机制&#xff08;try、catch、throw&#xff09;3.基本语法示例 二、标准异常类1.常见标准异常类&#xff1a;2.自定义异常类的实现 三、异常安全与最佳实践1. RAII&#xff08;资源获取即初…
阅读更多...
最新文章

Copyright @ 2022~2023