用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
繁體地址，請注明出處：http://hk.pswp.cn/web/81244.shtml
英文地址，請注明出處：http://en.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