当前位置: 首页 > news >正文

JavaScript赋能智能网页设计

构建AI驱动的实时风格迁移系统

案例概述

本案例将实现一个基于深度学习的实时图像风格迁移系统,通过浏览器端神经网络推理实现以下高级特性:

  1. WebAssembly加速的ONNX模型推理

  2. WebGL Shader实现的风格混合算法

  3. WebRTC实时视频流处理

  4. 基于Web Workers的多线程处理架构

  5. 动态模型热加载系统

  6. 智能显存管理策略

核心技术栈

plaintext

复制

- TensorFlow.js 4.0
- ONNX Runtime Web 1.15
- WebGPU (实验性支持)
- MediaPipe Face Mesh
- WebCodecs API
- RxJS 7.8

核心架构设计

mermaid

复制

graph TDA[摄像头输入] --> B(WebRTC捕获)B --> C{处理模式}C -->|实时视频| D[WebCodecs解码]C -->|图像上传| E[File API处理]D --> F[MediaPipe特征提取]E --> FF --> G[ONNX模型推理]G --> H[WebGL合成]H --> I[Canvas输出]

关键技术实现

1. WebAssembly加速的模型推理

javascript

复制

class StyleTransferEngine {constructor() {this.session = null;this.wasmBackend = 'wasm';}async loadModel(modelPath) {const executionProvider = await this.getOptimalBackend();this.session = await ort.InferenceSession.create(modelPath, {executionProviders: [executionProvider],graphOptimizationLevel: 'all'});}async getOptimalBackend() {const gpuSupport = await ort.WebGpuBackend.isSupported();return gpuSupport ? 'webgpu' : this.wasmBackend;}async processFrame(inputTensor) {const feeds = { 'input_image:0': inputTensor };const results = await this.session.run(feeds);return results['output_image:0'];}
}

2. 基于WebGL的实时合成

glsl

复制

// style_mixer.frag.glsl
precision highp float;
uniform sampler2D uContentTexture;
uniform sampler2D uStyleTexture;
uniform float uBlendFactor;varying vec2 vTexCoord;vec3 style_transfer_algorithm(vec3 content, vec3 style) {// 自适应颜色迁移算法vec3 meanContent = vec3(0.5);vec3 meanStyle = textureLod(uStyleTexture, vec2(0.5), 10.0).rgb;vec3 adjusted = content - meanContent;adjusted *= (style - meanStyle) / (content + 1e-5);return mix(content, adjusted, uBlendFactor);
}void main() {vec4 content = texture2D(uContentTexture, vTexCoord);vec4 style = texture2D(uStyleTexture, vTexCoord);gl_FragColor = vec4(style_transfer_algorithm(content.rgb, style.rgb),min(content.a, style.a));
}

3. 智能视频处理管道

javascript

复制

class VideoProcessor {constructor() {this.processor = new MediaStreamTrackProcessor({ track });this.reader = this.processor.readable.getReader();this.transformer = new TransformStream({transform: async (frame, controller) => {const processed = await this.processFrame(frame);controller.enqueue(processed);}});}async processFrame(frame) {const bitmap = await createImageBitmap(frame);const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);const ctx = canvas.getContext('2d');// 人脸特征点检测const faces = await faceMesh.estimateFaces(bitmap);this.applyFaceMask(ctx, faces);// 风格迁移处理const styleImage = await this.styleTransfer(canvas);// 混合输出return this.blendLayers(canvas, styleImage);}async styleTransfer(canvas) {const tensor = tf.browser.fromPixels(canvas).resizeBilinear([512, 512]).div(255);const output = await model.executeAsync(tensor);return tf.browser.toPixels(output);}
}

性能优化方案

1. 动态分辨率调整

javascript

复制

class AdaptiveQualityController {constructor() {this.qualityLevels = [0.25, 0.5, 0.75, 1];this.currentLevel = 3;this.frameTimes = [];}monitorPerformance() {const now = performance.now();this.frameTimes.push(now);if (this.frameTimes.length > 60) {const fps = 60000 / (now - this.frameTimes[0]);this.adjustQuality(fps);this.frameTimes = [];}}adjustQuality(currentFPS) {const targetFPS = 30;if (currentFPS < targetFPS - 5 && this.currentLevel > 0) {this.currentLevel--;this.applyQuality(this.qualityLevels[this.currentLevel]);} else if (currentFPS > targetFPS + 5 && this.currentLevel < 3) {this.currentLevel++;this.applyQuality(this.qualityLevels[this.currentLevel]);}}
}

2. Web Workers任务分发

javascript

复制

// main.js
const workerPool = new WorkerPool(4);async function processImage(data) {return workerPool.enqueue(async (worker) => {const response = await fetch('/models/style-transfer.onnx');const buffer = await response.arrayBuffer();worker.postMessage({type: 'PROCESS',imageData: data,modelBuffer: buffer}, [data.data.buffer, buffer]);return new Promise((resolve) => {worker.onmessage = (e) => resolve(e.data);});});
}// worker.js
self.onmessage = async (e) => {const { imageData, modelBuffer } = e.data;const session = await ort.InferenceSession.create(modelBuffer);const tensor = new ort.Tensor('float32', imageData.data, [1, 3, 512, 512]);const results = await session.run({ input: tensor });self.postMessage(results.output.data, [results.output.data.buffer]);
};

创新功能实现

1. 动态风格插值系统

javascript

复制

class StyleInterpolator {constructor(styles) {this.styleBank = styles.map(style => this.loadStyle(style));this.currentWeights = new Float32Array(styles.length);}async loadStyle(url) {const img = await tf.browser.fromPixelsAsync(await fetch(url));return tf.image.resizeBilinear(img, [256, 256]);}async getBlendedStyle(weights) {const styles = await Promise.all(this.styleBank);const blended = tf.tidy(() => {return styles.reduce((acc, style, i) => {return tf.add(acc, tf.mul(style, weights[i]));}, tf.zerosLike(styles[0]));});return blended;}
}

2. 智能缓存预热策略

javascript

复制

class ModelPreloader {constructor() {this.cache = new Map();this.observer = new IntersectionObserver(this.handleIntersection.bind(this));}observe(element) {const modelName = element.dataset.model;if (!this.cache.has(modelName)) {this.cache.set(modelName, {promise: this.loadModel(`/models/${modelName}.onnx`),used: false});}this.observer.observe(element);}handleIntersection(entries) {entries.forEach(entry => {if (entry.isIntersecting) {const modelName = entry.target.dataset.model;const record = this.cache.get(modelName);if (!record.used) {record.used = true;record.promise.then(model => {this.warmUpModel(model);});}}});}
}

效果增强技术

1. 基于注意力机制的区域增强

glsl

复制

// attention.frag.glsl
uniform sampler2D uFrame;
uniform sampler2D uAttentionMap;vec3 applyAttentionEffect(vec2 uv) {vec4 frame = texture2D(uFrame, uv);float attention = texture2D(uAttentionMap, uv).r;// 细节增强float sharpen = mix(1.0, 2.0, attention);vec3 details = frame.rgb * sharpen;// 颜色增强vec3 enhanced = mix(frame.rgb, details, attention);// 边缘光效果float glow = smoothstep(0.7, 1.0, attention);enhanced += vec3(0.8, 0.9, 1.0) * glow * 0.3;return enhanced;
}

2. 实时超分辨率重建

javascript

复制

class SuperResolution {constructor() {this.upscaler = new UpscaleJS();this.worker = new Worker('upscale-worker.js');}async upscale(image) {if ('gpu' in navigator) {return this.webgpuUpscale(image);}return this.wasmUpscale(image);}async webgpuUpscale(image) {const canvas = document.createElement('canvas');const context = canvas.getContext('webgpu');const device = await navigator.gpu.requestAdapter();const shaderModule = device.createShaderModule({code: superResolutionShader});// 创建渲染管线...return processedImage;}
}

部署与监控

1. 性能监控仪表板

javascript

复制

class PerformanceMonitor {constructor() {this.metrics = {fps: new RollingAverage(60),memory: new RollingAverage(10),inferenceTime: new RollingAverage(30)};this.reportToAnalytics();}start() {this.rafId = requestAnimationFrame(this.tick.bind(this));}tick(timestamp) {const delta = timestamp - (this.lastTimestamp || timestamp);this.metrics.fps.add(1000 / delta);// 内存监控if (performance.memory) {this.metrics.memory.add(performance.memory.usedJSHeapSize / 1024 / 1024);}this.lastTimestamp = timestamp;this.rafId = requestAnimationFrame(this.tick.bind(this));}reportToAnalytics() {navigator.sendBeacon('/analytics', JSON.stringify({fps: this.metrics.fps.average(),memory: this.metrics.memory.average(),inference: this.metrics.inferenceTime.average()}));}
}

2. 自动化模型剪枝

javascript

复制

async function optimizeModel(originalModel) {const pruningConfig = {targetSparsity: 0.5,beginStep: 1000,endStep: 2000,frequency: 100};const prunedModel = await tf.model.prune(originalModel, pruningConfig);const quantized = await tf.model.quantize(prunedModel, {scheme: 'hybrid',dtype: 'int8'});return quantized.save('indexeddb://optimized-model');
}

本系统实现了在浏览器端完成从视频采集到智能风格迁移的完整处理流程,相较传统云端方案具有以下优势:

  1. 零延迟处理:端到端处理时间控制在100ms以内

  2. 隐私保护:用户数据全程不离开本地设备

  3. 自适应性能:在低端设备上仍可保持15fps以上

  4. 动态扩展:支持运行时加载新风格模型

  5. 智能降级:在WebGPU不可用时自动切换WASM后端

相关文章:

JavaScript赋能智能网页设计

构建AI驱动的实时风格迁移系统 案例概述 本案例将实现一个基于深度学习的实时图像风格迁移系统&#xff0c;通过浏览器端神经网络推理实现以下高级特性&#xff1a; WebAssembly加速的ONNX模型推理 WebGL Shader实现的风格混合算法 WebRTC实时视频流处理 基于Web Workers的…...

全面了解 Web3 AIGC 和 AI Agent 的创新先锋 MelodAI

不管是在传统领域还是 Crypto&#xff0c;AI 都是公认的最有前景的赛道。随着数字内容需求的爆炸式增长和技术的快速迭代&#xff0c;Web3 AIGC&#xff08;AI生成内容&#xff09;和 AI Agent&#xff08;人工智能代理&#xff09;正成为两大关键赛道。 AIGC 通过 AI 技术生成…...

leetcode_链表 234.回文链表

234.回文链表 给你一个单链表的头节点head&#xff0c;请你判断该链表是否为回文链表。如果是, 返回 true ; 否则, 返回false。思路&#xff1a; 找到中间节点(快慢指针法)反转后半部分的链表比较前半部分和后半部分链表 # Definition for singly-linked list. # class List…...

cloc下载和使用

cloc&#xff08;Count Lines of Code&#xff09;是一个跨平台的命令行工具&#xff0c;用于计算代码行数。以下是下载和使用 cloc 的步骤&#xff1a; 下载 cloc 对于 Windows 用户&#xff1a; 访问 cloc 的 GitHub 仓库&#xff1a;https://github.com/AlDanial/cloc在 …...

在 Windows 系统上,将 Ubuntu 从 C 盘 迁移到 D 盘

在 Windows 系统上&#xff0c;如果你使用的是 WSL&#xff08;Windows Subsystem for Linux&#xff09;并安装了 Ubuntu&#xff0c;你可以将 Ubuntu 从 C 盘 迁移到 D 盘。迁移过程涉及导出当前的 Ubuntu 发行版&#xff0c;然后将其导入到 D 盘的目标目录。以下是详细的步骤…...

【Redis】Redis入门以及什么是分布式系统{Redis引入+分布式系统介绍}

文章目录 介绍redis的引入 分布式系统单机架构应用服务和数据库服务分离【负载均衡】引入更多的应用服务器节点 单机架构 分布式是什么 数据库分离和负载均衡 理解负载均衡 数据库读写分离 引入缓存 数据库分库分表 引入微服务 介绍 The open source, in-memory data store us…...

wow-agent---task4 MetaGPT初体验

先说坑&#xff1a; 1.使用git clone模式安装metagpt 2.模型尽量使用在线模型或本地高参数模型。 这里使用python3.10.11调试成功 一&#xff0c;安装 安装 | MetaGPT&#xff0c;参考这里的以开发模型进行安装 git clone https://github.com/geekan/MetaGPT.git cd /you…...

Leetcode::3432. 统计元素和差值为偶数的分区方案

3432. 统计元素和差值为偶数的分区方案 已解答 简单 相关企业 提示 给你一个长度为 n 的整数数组 nums 。 分区 是指将数组按照下标 i &#xff08;0 < i < n - 1&#xff09;划分成两个 非空 子数组&#xff0c;其中&#xff1a; 左子数组包含区间 [0, i] 内的所…...

linux如何修改密码,要在CentOS 7系统中修改密码

要在CentOS 7系统中修改密码&#xff0c;你可以按照以下步骤操作&#xff1a; 步骤 1: 登录到系统 在登录提示符 localhost login: 后输入你的用户名。输入密码并按回车键。 步骤 2: 修改密码 登录后&#xff0c;使用 passwd 命令来修改密码&#xff1a; passwd 系统会提…...

GIS与相关专业软件汇总

闲来无事突然想整理一下看看 GIS及相关领域 究竟有多少软件或者工具包等。 我询问了几个AI工具并汇总了一个软件汇总&#xff0c;不搜不知道&#xff0c;一搜吓一跳&#xff0c;搜索出来了大量的软件&#xff0c;大部分软件或者工具包都没有见过&#xff0c;不知大家还有没有要…...

云计算架构学习之LNMP架构部署、架构拆分、负载均衡-会话保持

一.LNMP架构部署 1.1. LNMP服务搭建 1.磁盘信息 2.内存 3.负载信息 4.Nginx你们公司都用来干嘛 5.文件句柄(文件描述符 打开文件最大数量) 6.你处理过系统中的漏洞吗 SSH漏洞 7.你写过什么shell脚本 8.监控通过什么告警 zabbix 具体监控哪些内容 9.mysql redis查询 你好H…...

mamba论文学习

rnn 1986 训练速度慢 testing很快 但是很快就忘了 lstm 1997 训练速度慢 testing很快 但是也会忘&#xff08;序列很长的时候&#xff09; GRU实在lstm的基础上改进&#xff0c;改变了一些门 transformer2017 训练很快&#xff0c;testing慢些&#xff0c;时间复杂度高&am…...

uva 1354 Mobile Computing

原题&#xff1a; 房间中有一个天平&#xff0c;房间的宽度为r&#xff0c;有s个砝码&#xff0c;每个砝码的重量是 w i w_i wi​。设计一个尽量宽&#xff0c;但是宽度不能超过r的天平&#xff0c;挂住所有砝码。天平全部由长度为1的木棍组成&#xff0c;木棍的每一端要么挂一…...

理解C++中的右值引用

右值引用&#xff0c;顾名思义&#xff0c;就是对一个右值进行引用&#xff0c;或者说给右值一个别名。右值引用的规则和左值一用一模一样&#xff0c;都是对一个值或者对象起个别名。 1. 右值引用和左值引用一样&#xff0c;在定义的同时必须立即赋值&#xff0c;如果不立即赋…...

约数个数(简单)

给定 nn 个正整数 aiai&#xff0c;请你输出这些数的乘积的约数个数&#xff0c;答案对 10971097 取模。 输入格式 第一行包含整数 nn。 接下来 nn 行&#xff0c;每行包含一个整数 aiai。 输出格式 输出一个整数&#xff0c;表示所给正整数的乘积的约数个数&#xff0c;答…...

Day33:字符串的切片

在 Python 中&#xff0c;**切片&#xff08;Slicing&#xff09;**是对字符串&#xff08;以及其他序列类型&#xff0c;如列表、元组等&#xff09;进行提取部分内容的强大工具。通过切片&#xff0c;你可以非常方便地提取字符串的子字符串、倒序字符串&#xff0c;甚至进行步…...

基于回归分析法的光伏发电系统最大功率计算simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于回归分析法的光伏发电系统最大功率计算simulink建模与仿真。选择回归法进行最大功率点的追踪&#xff0c;使用光强和温度作为影响因素&#xff0c;电压作为输出进行建模。…...

redis离线安装部署详解(包括一键启动)

像上文一样 因为在学习的过程中没有查到一个详细的离线部署方案 所以在自己学习之后想要自己写一个文章 希望可以帮助后续学习redis离线部署的朋友少走一线弯路 首先就是下载安装包 可以自己在本地下载再传到机器上&#xff08;通过xftp或lrzsz都可&#xff09; http://d…...

Coze插件开发之基于已有服务创建并上架到扣子商店

Coze插件开发之基于已有服务创建并上架到扣子商店 在应用开发中&#xff0c;需要调用各种插件&#xff0c;以快速进行开发。但有时需要调用的插件在扣子商店里没有&#xff0c;那怎么办呢&#xff1f; 今天就来带大家快速基于已有服务创建一个新的插件 简单来讲&#xff0c;就是…...

【Unity】 HTFramework框架(五十九)快速开发编辑器工具(Assembly Viewer + ILSpy)

更新日期&#xff1a;2025年1月23日。 Github源码&#xff1a;[点我获取源码] Gitee源码&#xff1a;[点我获取源码] 索引 开发编辑器工具MouseRayTarget焦点视角Collider线框Assembly Viewer搜索程序集ILSpy反编译程序集搜索GizmosElement类找到Gizmos菜单找到Gizmos窗口分析A…...

【Linux】统计文本中每行指定位置出现的字符串的次数

统计文本中每行指定位置出现的字符串的次数 假定情景 某些项目&#xff0c;会把某个特定事件记录到Log中并且落盘&#xff08;保持到硬盘&#xff09;。基于落盘后的日志&#xff0c;要统计这些日志里产生该特定事件的次数 统计脚本 可以写一个sh脚本&#xff0c;来解析某个…...

牛客周赛round78 B,C

B.一起做很甜的梦 题意&#xff1a;就是输出n个数&#xff08;1-n&#xff09;&#xff0c;使输出的序列中任意选连续的小序列&#xff08;小序列长度>2&&<n-1&#xff09;不符合排列&#xff08;例如如果所选长度为2&#xff0c;在所有长度为2 的小序列里不能出…...

【DB】Oracle存储过程

目录 什么是存储过程&#xff1f; 为什么要使用存储过程&#xff1f; 创建存储过程 无参存储过程语法&#xff1a; 带参存储过程语法&#xff1a; 带有输入参数的存储过程 带有输出参数的存储过程 带有输入输出参数的存储过程 带有异常处理的存储过程 存储过程中游标…...

亚博microros小车-原生ubuntu支持系列:14雷达跟踪与雷达守卫

背景知识 激光雷达的数据格式参见&#xff1a; 亚博microros小车-原生ubuntu支持系列&#xff1a;13 激光雷达避障-CSDN博客 本节体验雷达跟踪跟守卫 PID控制 从百度百科摘一段介绍 比例积分微分控制&#xff08;proportional-integral-derivative control&#xff09;&am…...

c++迷宫问题(migong)

今天的题目叫“迷宫问题(migong&#xff09;”&#xff0c;是“DFS深度优先搜索 递归”一类的。 题目描述 设有一个N*N(2<N<10)方格的迷宫&#xff0c;入口和出口分别在左上角和右上角。迷宫格子中 分别放0和1&#xff0c;0表示可通&#xff0c;1表示不能&#xff0c;入…...

深度学习项目--基于LSTM的糖尿病预测探究(pytorch实现)

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 前言 LSTM模型一直是一个很经典的模型&#xff0c;一般用于序列数据预测&#xff0c;这个可以很好的挖掘数据上下文信息&#xff0c;本文将使用LSTM进行糖尿病…...

Java Swing 基础组件详解 [论文投稿-第四届智能系统、通信与计算机网络]

大会官网&#xff1a;www.icisccn.net Java Swing 是一个功能强大的 GUI 工具包&#xff0c;提供了丰富的组件库用于构建跨平台的桌面应用程序。本文将详细讲解 Swing 的基础组件&#xff0c;包括其作用、使用方法以及示例代码&#xff0c;帮助你快速掌握 Swing 的核心知识。 一…...

深圳大学-智能网络与计算-实验三:网络容量优化分析实验

实验目的与要求 了解什么是凸优化问题&#xff1b;学会使用 Matlab CVX 工具箱解决最优功率分配问题&#xff0c;使得信道容量最大化&#xff1b;了解注水算法&#xff1b; 方法&#xff0c;步骤 深入理解最优功率分配问题。使用 CVX 找出最优的功率分配。使用凸优化数学分析…...

嵌入式基础 -- PCIe 控制器中断管理之MSI与MSI-X简介

PCIe 控制器中断管理技术文档 1. 背景 在现代计算机系统中&#xff0c;中断是设备与 CPU 通信的重要机制&#xff0c;PCIe 控制器提供了从传统线中断到基于消息的中断&#xff08;MSI/MSI-X&#xff09;的演进&#xff0c;以提升中断处理效率和可扩展性。x86 和 ARM 架构虽然…...

Android-okhttp详解

目录 一&#xff0c;介绍 二&#xff0c;简单使用 三&#xff0c;流程分析 四&#xff0c;分发器 五&#xff0c;拦截器 5.1 重试及重定向拦截器 5.1.1 重试 5.1.2 重定向 5.2 桥接拦截器 5.3 缓存拦截器 5.4 连接拦截器 5.5 请求服务器拦截器 一&#xff0c;介绍 OkHttp是当下…...

CNN-BiLSTM卷积双向长短期记忆神经网络时间序列预测(Matlab完整源码和数据)

CNN-BiLSTM卷积双向长短期记忆神经网络时间序列预测&#xff08;Matlab完整源码和数据&#xff09; 目录 CNN-BiLSTM卷积双向长短期记忆神经网络时间序列预测&#xff08;Matlab完整源码和数据&#xff09;预测效果基本介绍 CNN-BiLSTM卷积双向长短期记忆神经网络时间序列预测一…...

数字图像处理:实验七

uu们&#xff01;这是我们目前数字图像系列的最后一张&#xff0c;之后有关人工智能结合的数字图像处理咸鱼哥正在学习和创作中&#xff0c;所以还请大家给咸鱼哥点时间&#xff0c;同时也提前预祝大家2025年新春快乐&#xff01;&#xff08;咸鱼哥真诚的祝愿每一个人&#xf…...

Excel分区间统计分析(等步长、不等步长、多维度)

在数据分析过程中&#xff0c;可能会需要统计不同数据区间的人数、某个数据区间的平均值或者进行分组区间统计&#xff0c;本文从excel函数到数据透视表的方法&#xff0c;从简单需求到复杂需求&#xff0c;采用不同的方法进行讲解&#xff0c;尤其是通过数据透视表的强大功能大…...

QWindow类使用介绍与代码演示

深入浅出C++ Qt开发技术专栏 https://blog.csdn.net/yao_hou/category_9276099.html?spm=1001.2014.3001.5482 文章目录 QWindow主要功能和特性常用的函数示例代码适用场景QWindow父类QSurface`QSurface` 类概述主要功能和特性常用的函数相关的子类示例代码`QSurface` 的实际应…...

OpenCV图像显示imshow()函数——详解

OpenCV图像显示imshow()函数——详解 本文目录&#xff1a; 零、时光宝盒 一、OpenCV 图像显示使用imshow()函数语法 二、imshow()显示图片时发生图片显示不全的解决方法 解决办法&#xff08;1&#xff09; 解决办法&#xff08;2&#xff09; 总结 三、imshow()图像显…...

Oracle 12c 中的 CDB和PDB的启动和关闭

一、简介 Oracle 12c引入了多租户架构&#xff0c;允许一个容器数据库&#xff08;Container Database, CDB&#xff09;托管多个独立的可插拔数据库&#xff08;Pluggable Database, PDB&#xff09;。本文档旨在详细描述如何启动和关闭CDB及PDB。 二、容器数据库 (CDB) 2.1…...

二次封装的方法

二次封装 我们开发中经常需要封装一些第三方组件&#xff0c;那么父组件应该怎么传值&#xff0c;怎么调用封装好的组件原有的属性、插槽、方法&#xff0c;一个个调用虽然可行&#xff0c;但十分麻烦&#xff0c;我们一起来看更简便的方法。 二次封装组件&#xff0c;属性怎…...

【BQ3568HM开发板】如何在OpenHarmony上通过校园网的上网认证

引言 前面已经对BQ3568HM开发板进行了初步测试&#xff0c;后面我要实现MQTT的工作&#xff0c;但是遇到一个问题&#xff0c;就是开发板无法通过校园网的认证操作。未认证的话会&#xff0c;学校使用的深澜软件系统会屏蔽所有除了认证用的流量。好在我们学校使用的认证系统和…...

安装Ubuntu22.04

1.引用教程 如何安装Ubuntu Server 22.04 LTS_ubuntu22.04 server-CSDN博客 2.空间分配 要使用 docker 比较多所以分别的 docker 空间大...

Charles 4.6.7 浏览器网络调试指南:流量过滤与分析(六)

1. 概述 在网络调试和优化过程中&#xff0c;Charles 不仅可以实现简单的网络抓包操作&#xff0c;还支持更高级的抓包技巧和流量分析功能。这些功能能够帮助开发者深入挖掘网络请求的细节&#xff0c;为复杂问题提供有效的解决方案。本文将重点讲解 Charles 的过滤规则、自定…...

浅拷贝(Shallow Copy)和深拷贝(Deep Copy)

浅拷贝&#xff08;Shallow Copy&#xff09;和深拷贝&#xff08;Deep Copy&#xff09;是对象复制的两种方式&#xff0c;它们在处理对象内部引用类型成员时有不同的行为。下面我将详细解释这两种拷贝的区别&#xff0c;并提供具体的 Java 示例代码。 浅拷贝&#xff08;Shal…...

解决双系统引导问题:Ubuntu 启动时不显示 Windows 选项的处理方法

方法 1&#xff1a;检查 GRUB 引导菜单是否隐藏 启动进入 Ubuntu 系统。打开终端&#xff0c;输入以下命令编辑 GRUB 配置文件&#xff1a;sudo nano /etc/default/grub检查以下配置项&#xff1a; GRUB_TIMEOUT0&#xff1a;如果是 0&#xff0c;将其改为一个较大的值&#x…...

宏_wps_宏修改word中所有excel表格的格式_设置字体对齐格式_删除空行等

需求&#xff1a; 将word中所有excel表格的格式进行统一化&#xff0c;修改其中的数字类型为“宋体&#xff0c; 五号&#xff0c;右对齐&#xff0c; 不加粗&#xff0c;不倾斜”&#xff0c;其中的中文为“宋体&#xff0c; 五号&#xff0c; 不加粗&#xff0c;不倾斜” 数…...

行政办公管理系统的需求设计和实现

前言&#xff1a; 总裁办/综合部&#xff0c;作为综合行政管理部门服务于整个公司&#xff0c;工作职责包含从最基础的行政综合到协调督办、对外政务、品牌建设等等&#xff0c;工作量繁多而且琐碎。如何通过信息化来实现标准化和常态化的管理手段&#xff0c;确保总裁办的各项…...

996引擎 - NPC-动态创建NPC

996引擎 - NPC-动态创建NPC 创建脚本服务端脚本客户端脚本参考资料有个小问题,创建NPC时没有控制朝向的参数。所以。。。自己考虑怎么找补吧。 创建脚本 服务端脚本 Mir200\Envir\Market_Def\test\test001-3.lua -- NPC入口函数 function main(player)-- 获取玩家的用户名…...

HTML<hgroup>标签

例子&#xff1a; 使用hgroup元素标记标题和段落是相关的&#xff1a; <hgroup> <h2>Norway</h2> <p>The land with the midnight sun.</p> </hgroup> 定义和用法&#xff1a; 标签<hgroup>用于包围标题和一个或多个<p&g…...

GIS 中的 SQLAlchemy:空间数据与数据库之间的桥梁

利用 SQLAlchemy 在现代应用程序中无缝集成地理空间数据导言 地理信息系统&#xff08;GIS&#xff09;在管理城市规划、环境监测和导航系统等各种应用的空间数据方面发挥着至关重要的作用。虽然 PostGIS 或 SpatiaLite 等专业地理空间数据库在处理空间数据方面非常出色&#…...

机试题——最小矩阵宽度

题目描述 给定一个矩阵&#xff0c;包含 N * M 个整数&#xff0c;和一个包含 K 个整数的数组。 现在要求在这个矩阵中找一个宽度最小的子矩阵&#xff0c;要求子矩阵包含数组中所有的整数。 输入描述 第一行输入两个正整数 N&#xff0c;M&#xff0c;表示矩阵大小。 接下…...

【C++图论】1761. 一个图中连通三元组的最小度数|2005

本文涉及知识点 C图论 LeetCode1761. 一个图中连通三元组的最小度数 给你一个无向图&#xff0c;整数 n 表示图中节点的数目&#xff0c;edges 数组表示图中的边&#xff0c;其中 edges[i] [ui, vi] &#xff0c;表示 ui 和 vi 之间有一条无向边。 一个 连通三元组 指的是 …...

【力扣:新动计划,编程入门 —— 题解 ③】

—— 25.1.26 231. 2 的幂 给你一个整数 n&#xff0c;请你判断该整数是否是 2 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 如果存在一个整数 x 使得 n 2x &#xff0c;则认为 n 是 2 的幂次方。 示例 1&#xff1a; 输入&#xff1a;…...