结合 react-webcam、three.js 与 electron 实现桌面人脸动捕应用

系列文章目录

  1. React 使用 three.js 加载 gltf 3D模型 | three.js 入门
  2. React + three.js 3D模型骨骼绑定
  3. React + three.js 3D模型面部表情控制
  4. React + three.js 实现人脸动捕与3D模型表情同步
  5. 结合 react-webcam、three.js 与 electron 实现桌面人脸动捕应用

示例项目(github):https://github.com/couchette/simple-facial-expression-sync-desktop-app-demo

文章目录

  • 系列文章目录
  • 前言
  • 一、准备工作
    • 1. 创建项目
    • 2. 安装依赖
    • 3. 本地化配置
      • 下载AI模型
      • 下载模型配置文件
      • 复制transcoder配置文件
      • 下载3D模型
      • 配置CSP允许使用wasm
      • 设置webpack配置
  • 二、实现步骤
    • 1.创建detecor
    • 2. 实现WebCam
    • 3. 创建3D模型渲染容器
    • 4. 将三者组合起来实现一个页面
  • 三、最终效果
  • 总结


前言

开发桌面级别的人脸动捕应用程序是一个具有挑战性但也充满创意的任务。本文将介绍如何利用 React-Webcam、Three.js 和 Electron 结合起来,轻松实现一个功能强大的桌面人脸动捕应用。

在本文中,我们将详细介绍如何结合这三种技术,从搭建基础环境到实现人脸捕捉和渲染,最终打造出一个功能完善的桌面人脸动捕应用。无论您是想要深入了解这些技术的原理,还是想要快速构建一个个性化的人脸动捕应用,本文都将为您提供全面的指导和实践经验。


一、准备工作

1. 创建项目

参考让你的软件自动更新,如何使用github和electron-react-boilerplate跨平台应用模板项目实现软件的自动更新功能 使用electron-react-boilerpalte 作为模版项目创建项目,本地将以下面的fork项目作为模版项目,创建项目,该fork包括electron配置脚本(用于配置镜像地址),和一些自制的组件,有实力的小伙伴也可以自制属于自己的模板项目。

https://github.com/couchette/electron-react-boilerplate

2. 安装依赖

npm i
npm i react-webcam antd three @mediapipe/tasks-vision
npm i -D copy-webpack-plugin

3. 本地化配置

下载AI模型

从下面的地址下载模型到assets/ai_models目录下

https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task

下载模型配置文件

从下面地址下载wasm目录到assets/fileset_resolver目录下

https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm

复制transcoder配置文件

复制目录 node_modules/three/examples/jsm/libs/basis到assets目录下

下载3D模型

从下面地址下载3D人脸模型到目录assets/models目录下

https://github.com/mrdoob/three.js/blob/master/examples/models/gltf/facecap.glb

配置CSP允许使用wasm

修改src/render/index.ejs内容如下(这将导致CSP安全警告,目前没有不清楚有其他方法可以在electron-react-boilerplate使用wasm,有知道的大神请告诉我该如何配置,拜谢了)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="script-src 'self' 'unsafe-inline' 'unsafe-eval'; worker-src 'self' blob:;"
    />
    <title>emberface</title>
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

设置webpack配置

修改.erb/configs/webpack.config.base.ts文件内容如下

/**
 * Base webpack config used across other specific configs
 */

import path from 'path';
import webpack from 'webpack';
import TsconfigPathsPlugins from 'tsconfig-paths-webpack-plugin';
import CopyPlugin from 'copy-webpack-plugin';
import webpackPaths from './webpack.paths';
import { dependencies as externals } from '../../release/app/package.json';

const configuration: webpack.Configuration = {
  externals: [...Object.keys(externals || {})],

  stats: 'errors-only',

  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'ts-loader',
          options: {
            // Remove this line to enable type checking in webpack builds
            transpileOnly: true,
            compilerOptions: {
              module: 'esnext',
            },
          },
        },
      },
    ],
  },

  output: {
    path: webpackPaths.srcPath,
    // https://github.com/webpack/webpack/issues/1114
    library: {
      type: 'commonjs2',
    },
  },

  /**
   * Determine the array of extensions that should be used to resolve modules.
   */
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
    modules: [webpackPaths.srcPath, 'node_modules'],
    // There is no need to add aliases here, the paths in tsconfig get mirrored
    plugins: [new TsconfigPathsPlugins()],
  },

  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: path.join(webpackPaths.rootPath, 'assets', 'models'),
          to: path.join(webpackPaths.distRendererPath, 'models'),
        },
        {
          from: path.join(webpackPaths.rootPath, 'assets', 'ai_models'),
          to: path.join(webpackPaths.distRendererPath, 'ai_models'),
        },
        {
          from: path.join(webpackPaths.rootPath, 'assets', 'basis'),
          to: path.join(webpackPaths.distRendererPath, 'basis'),
        },
        {
          from: path.join(webpackPaths.rootPath, 'assets', 'fileset_resolver'),
          to: path.join(webpackPaths.distRendererPath, 'fileset_resolver'),
        },
      ],
    }),
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'production',
    }),
  ],
};

export default configuration;

二、实现步骤

1.创建detecor

在src/renderer/components/Detector.js中创建Detector单例类,封装模型的初始化和运行方法

import { FaceLandmarker, FilesetResolver } from '@mediapipe/tasks-vision';

export default class Detector {
  constructor() {}

  // 获取单例实例的静态方法
  static async getInstance() {
    if (!Detector.instance) {
      Detector.instance = new Detector();
      Detector.instance.results = null;
      Detector.instance.video = null;
      const filesetResolver = await FilesetResolver.forVisionTasks(
        // 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm',
        'fileset_resolver/wasm',
      );
      Detector.instance.faceLandmarker = await FaceLandmarker.createFromOptions(
        filesetResolver,
        {
          baseOptions: {
            modelAssetPath:
              // "https://storage.googleapis.com/mediapipe-models/face_landmarker/face_landmarker/float16/1/face_landmarker.task",
              'ai_models/face_landmarker.task',
            delegate: 'GPU',
          },
          outputFaceBlendshapes: true,
          outputFacialTransformationMatrixes: true,
          runningMode: 'VIDEO',
          numFaces: 1,
        },
      );
    }
    return Detector.instance;
  }

  bindVideo(video) {
    this.video = video;
  }

  detect() {
    return this.faceLandmarker.detectForVideo(this.video, Date.now());
  }

  async detectLoop() {
    this.results = this.detect();
    this.detectLoop();
  }

  async run() {
    if (!this.video.srcObject) throw new Error('Video bind is null');
    this.detectLoop();
  }
}

2. 实现WebCam

在src/renderer/components/WebCam.js中使用react-webcam实现webcam功能,代码如下

import React, { useState, useRef, useEffect } from 'react';
import { Button, Select, Layout } from 'antd';
import Webcam from 'react-webcam';

const { Option } = Select;
const { Content } = Layout;

function WebCam({
  isShowCanvas,
  canvasHeight,
  canvasWidth,
  stream,
  setStream,
  videoRef,
  loaded,
  setLoaded,
}) {
  const [isStartCamButtonLoading, setIsStartCamButtonLoading] = useState(false);
  const [selectedDevice, setSelectedDevice] = useState(null);
  const [devices, setDevices] = useState([]);

  const handleVideoLoad = (videoNode) => {
    const video = videoNode.target;
    videoRef.current = videoNode.target;
    if (video.readyState !== 4) return;
    if (loaded) return;
    setLoaded(true);
    setIsStartCamButtonLoading(false);
    console.log('loaded');
  };

  // 获取可用的视频设备列表
  const getVideoDevices = async () => {
    const devicesInfo = await navigator.mediaDevices.enumerateDevices();
    const videoDevices = devicesInfo.filter(
      (device) => device.kind === 'videoinput',
    );
    setDevices(videoDevices);
  };

  // 切换相机设备
  const handleDeviceChange = (deviceId) => {
    setSelectedDevice(deviceId);
  };

  // 开启摄像头
  const startCamera = async () => {
    setIsStartCamButtonLoading(true);
    if (!loaded) {
      const constraints = {
        video: {
          deviceId: selectedDevice ? { exact: selectedDevice } : undefined,
        },
      };
      const tempStream = await navigator.mediaDevices.getUserMedia(constraints);
      setStream(tempStream);
    }
  };

  // 停止摄像头
  const stopCamera = () => {
    if (stream) {
      stream.getTracks().forEach((track) => track.stop());
      setStream(null);
      setSelectedDevice(null);
      setLoaded(false);
    }
  };

  // 获取视频设备列表
  React.useEffect(() => {
    getVideoDevices();
  }, []);

  return (
    <Content
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Select
        placeholder="选择相机"
        style={{ width: '150px', marginBottom: 16 }}
        onChange={handleDeviceChange}
      >
        {devices.map((device) => (
          <Option key={device.deviceId} value={device.deviceId}>
            {device.label || `Camera ${device.deviceId}`}
          </Option>
        ))}
      </Select>
      <div
        style={{
          display: 'flex',
          flexDirection: 'row',
          alignContent: 'center',
          justifyContent: 'center',
        }}
      >
        <Button onClick={startCamera} loading={isStartCamButtonLoading}>
          启动相机
        </Button>
        <Button onClick={stopCamera} style={{ marginLeft: 8 }}>
          关闭相机
        </Button>
      </div>
      <div
        style={{
          height: String(canvasHeight) + 'px',
          width: String(canvasWidth) + 'px',
          margin: '10px',
          position: 'relative',
        }}
      >
        {stream && (
          <Webcam
            style={{
              visibility: isShowCanvas ? 'visible' : 'hidden',
              position: 'absolute',
              top: '0',
              bottom: '0',
              left: '0',
              right: '0',
            }}
            width={canvasWidth}
            height={canvasHeight}
            videoConstraints={{
              deviceId: selectedDevice ? { exact: selectedDevice } : undefined,
            }}
            onLoadedData={handleVideoLoad}
          />
        )}
      </div>
    </Content>
  );
}

export default WebCam;

3. 创建3D模型渲染容器

在src/renderer/components/ThreeContainer.js中创建3D模型渲染组件,代码内容如下

import * as THREE from 'three';

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
import { useRef, useEffect, useState } from 'react';

// Mediapipe

const blendshapesMap = {
  // '_neutral': '',
  browDownLeft: 'browDown_L',
  browDownRight: 'browDown_R',
  browInnerUp: 'browInnerUp',
  browOuterUpLeft: 'browOuterUp_L',
  browOuterUpRight: 'browOuterUp_R',
  cheekPuff: 'cheekPuff',
  cheekSquintLeft: 'cheekSquint_L',
  cheekSquintRight: 'cheekSquint_R',
  eyeBlinkLeft: 'eyeBlink_L',
  eyeBlinkRight: 'eyeBlink_R',
  eyeLookDownLeft: 'eyeLookDown_L',
  eyeLookDownRight: 'eyeLookDown_R',
  eyeLookInLeft: 'eyeLookIn_L',
  eyeLookInRight: 'eyeLookIn_R',
  eyeLookOutLeft: 'eyeLookOut_L',
  eyeLookOutRight: 'eyeLookOut_R',
  eyeLookUpLeft: 'eyeLookUp_L',
  eyeLookUpRight: 'eyeLookUp_R',
  eyeSquintLeft: 'eyeSquint_L',
  eyeSquintRight: 'eyeSquint_R',
  eyeWideLeft: 'eyeWide_L',
  eyeWideRight: 'eyeWide_R',
  jawForward: 'jawForward',
  jawLeft: 'jawLeft',
  jawOpen: 'jawOpen',
  jawRight: 'jawRight',
  mouthClose: 'mouthClose',
  mouthDimpleLeft: 'mouthDimple_L',
  mouthDimpleRight: 'mouthDimple_R',
  mouthFrownLeft: 'mouthFrown_L',
  mouthFrownRight: 'mouthFrown_R',
  mouthFunnel: 'mouthFunnel',
  mouthLeft: 'mouthLeft',
  mouthLowerDownLeft: 'mouthLowerDown_L',
  mouthLowerDownRight: 'mouthLowerDown_R',
  mouthPressLeft: 'mouthPress_L',
  mouthPressRight: 'mouthPress_R',
  mouthPucker: 'mouthPucker',
  mouthRight: 'mouthRight',
  mouthRollLower: 'mouthRollLower',
  mouthRollUpper: 'mouthRollUpper',
  mouthShrugLower: 'mouthShrugLower',
  mouthShrugUpper: 'mouthShrugUpper',
  mouthSmileLeft: 'mouthSmile_L',
  mouthSmileRight: 'mouthSmile_R',
  mouthStretchLeft: 'mouthStretch_L',
  mouthStretchRight: 'mouthStretch_R',
  mouthUpperUpLeft: 'mouthUpperUp_L',
  mouthUpperUpRight: 'mouthUpperUp_R',
  noseSneerLeft: 'noseSneer_L',
  noseSneerRight: 'noseSneer_R',
  // '': 'tongueOut'
};

function ThreeContainer({ videoHeight, videoWidth, detectorRef }) {
  const containerRef = useRef(null);
  const isContainerRunning = useRef(false);

  useEffect(() => {
    if (!isContainerRunning.current && containerRef.current) {
      isContainerRunning.current = true;
      init();
    }

    async function init() {
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.toneMapping = THREE.ACESFilmicToneMapping;
      const element = renderer.domElement;
      containerRef.current.appendChild(element);

      const camera = new THREE.PerspectiveCamera(
        60,
        window.innerWidth / window.innerHeight,
        1,
        100,
      );
      camera.position.z = 5;

      const scene = new THREE.Scene();
      scene.scale.x = -1;

      const environment = new RoomEnvironment(renderer);
      const pmremGenerator = new THREE.PMREMGenerator(renderer);

      scene.background = new THREE.Color(0x666666);
      scene.environment = pmremGenerator.fromScene(environment).texture;

      // const controls = new OrbitControls(camera, renderer.domElement);

      // Face

      let face, eyeL, eyeR;
      const eyeRotationLimit = THREE.MathUtils.degToRad(30);

      const ktx2Loader = new KTX2Loader()
        .setTranscoderPath('/basis/')
        .detectSupport(renderer);

      new GLTFLoader()
        .setKTX2Loader(ktx2Loader)
        .setMeshoptDecoder(MeshoptDecoder)
        .load('models/facecap.glb', (gltf) => {
          const mesh = gltf.scene.children[0];
          scene.add(mesh);

          const head = mesh.getObjectByName('mesh_2');
          head.material = new THREE.MeshNormalMaterial();

          face = mesh.getObjectByName('mesh_2');
          eyeL = mesh.getObjectByName('eyeLeft');
          eyeR = mesh.getObjectByName('eyeRight');

          // GUI

          const gui = new GUI();
          gui.close();

          const influences = head.morphTargetInfluences;

          for (const [key, value] of Object.entries(
            head.morphTargetDictionary,
          )) {
            gui
              .add(influences, value, 0, 1, 0.01)
              .name(key.replace('blendShape1.', ''))
              .listen(influences);
          }

          renderer.setAnimationLoop(() => {
            animation();
          });
        });

      // const texture = new THREE.VideoTexture(video);
      // texture.colorSpace = THREE.SRGBColorSpace;

      const geometry = new THREE.PlaneGeometry(1, 1);
      const material = new THREE.MeshBasicMaterial({
        // map: texture,
        depthWrite: false,
      });
      const videomesh = new THREE.Mesh(geometry, material);
      scene.add(videomesh);
      const transform = new THREE.Object3D();

      function animation() {
        if (detectorRef.current !== null) {
          // console.log(detectorRef.current);
          const results = detectorRef.current.detect();

          if (results.facialTransformationMatrixes.length > 0) {
            const facialTransformationMatrixes =
              results.facialTransformationMatrixes[0].data;

            transform.matrix.fromArray(facialTransformationMatrixes);
            transform.matrix.decompose(
              transform.position,
              transform.quaternion,
              transform.scale,
            );

            const object = scene.getObjectByName('grp_transform');

            object.position.x = transform.position.x;
            object.position.y = transform.position.z + 40;
            object.position.z = -transform.position.y;

            object.rotation.x = transform.rotation.x;
            object.rotation.y = transform.rotation.z;
            object.rotation.z = -transform.rotation.y;
          }

          if (results.faceBlendshapes.length > 0) {
            const faceBlendshapes = results.faceBlendshapes[0].categories;

            // Morph values does not exist on the eye meshes, so we map the eyes blendshape score into rotation values
            const eyeScore = {
              leftHorizontal: 0,
              rightHorizontal: 0,
              leftVertical: 0,
              rightVertical: 0,
            };

            for (const blendshape of faceBlendshapes) {
              const categoryName = blendshape.categoryName;
              const score = blendshape.score;

              const index =
                face.morphTargetDictionary[blendshapesMap[categoryName]];

              if (index !== undefined) {
                face.morphTargetInfluences[index] = score;
              }

              // There are two blendshape for movement on each axis (up/down , in/out)
              // Add one and subtract the other to get the final score in -1 to 1 range
              switch (categoryName) {
                case 'eyeLookInLeft':
                  eyeScore.leftHorizontal += score;
                  break;
                case 'eyeLookOutLeft':
                  eyeScore.leftHorizontal -= score;
                  break;
                case 'eyeLookInRight':
                  eyeScore.rightHorizontal -= score;
                  break;
                case 'eyeLookOutRight':
                  eyeScore.rightHorizontal += score;
                  break;
                case 'eyeLookUpLeft':
                  eyeScore.leftVertical -= score;
                  break;
                case 'eyeLookDownLeft':
                  eyeScore.leftVertical += score;
                  break;
                case 'eyeLookUpRight':
                  eyeScore.rightVertical -= score;
                  break;
                case 'eyeLookDownRight':
                  eyeScore.rightVertical += score;
                  break;
              }
            }

            eyeL.rotation.z = eyeScore.leftHorizontal * eyeRotationLimit;
            eyeR.rotation.z = eyeScore.rightHorizontal * eyeRotationLimit;
            eyeL.rotation.x = eyeScore.leftVertical * eyeRotationLimit;
            eyeR.rotation.x = eyeScore.rightVertical * eyeRotationLimit;
          }
        }

        videomesh.scale.x = videoWidth / 100;
        videomesh.scale.y = videoHeight / 100;

        renderer.render(scene, camera);

        // controls.update();
      }

      window.addEventListener('resize', function () {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);
      });
    }
  }, []);
  return (
    <div
      ref={containerRef}
      style={{
        position: 'relative',
        top: '0',
        left: '0',
        width: '100vw',
        height: '100vh',
      }}
    >
    </div>
  );
}

export default ThreeContainer;

4. 将三者组合起来实现一个页面

详细代码如下

import React, { useEffect, useState, useRef } from 'react';
import { Page } from './Page';
import ThreeContainer from '../components/ThreeContainer';
import WebCam from '../components/WebCam';
import Detector from '../components/Detector';

function PageContent() {
  const [stream, setStream] = useState(null);
  const videoRef = useRef(null);
  const [isWebCamLoaded, setIsWebCamLoaded] = useState(false);
  const detectorRef = useRef(null);

  useEffect(() => {
    async function init() {
      Detector.getInstance().then((rtn) => {
        detectorRef.current = rtn;
        detectorRef.current.bindVideo(videoRef.current);
      });
    }
    if (isWebCamLoaded) {
      init();
    }
  }, [isWebCamLoaded]);

  return (
    <div
      style={{
        position: 'relative',
        top: '0',
        left: '0',
        bottom: '0',
        right: '0',
      }}
    >
      <ThreeContainer
        id="background"
        videoHeight={window.innerHeight}
        videoWidth={window.innerWidth}
        detectorRef={detectorRef}
      />
      <div
        id="UI"
        style={{
          position: 'absolute',
          top: '0',
          left: '0',
          bottom: '0',
          right: '0',
        }}
      >
        <WebCam
          isShowCanvas={false}
          canvasHeight={480}
          canvasWidth={640}
          stream={stream}
          setStream={setStream}
          videoRef={videoRef}
          isLoaded={isWebCamLoaded}
          setLoaded={setIsWebCamLoaded}
        />
      </div>
    </div>
  );
}

export function App() {
  return (
    <Page>
      <PageContent />
    </Page>
  );
}
export default App;

三、最终效果

运行项目npm start,效果如下
请添加图片描述


总结

本文介绍了如何结合 react-webcam、three.js 与 electron 实现桌面人脸动捕应用,希望对您有所帮助,如果文章中存在任何问题、疏漏,或者您对文章有任何建议,请在评论区提出。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MES生产管理系统:私有云、公有云与本地化部署的比较分析

随着信息技术的迅猛发展&#xff0c;云计算作为一种新兴的技术服务模式&#xff0c;已经深入渗透到企业的日常运营中。在众多部署方式中&#xff0c;私有云、公有云和本地化部署是三种最为常见的选择。它们各自具有独特的特点和适用场景&#xff0c;并在不同程度上影响着企业的…

neo4j使用详解(结尾、neo4j的java driver使用模板及工具类——<可用于生产>)

Neo4j系列导航: neo4j安装及简单实践 cypher语法基础 cypher插入语法 cypher插入语法 cypher查询语法 cypher通用语法 cypher函数语法 neo4j索引及调优 neo4j java Driver等更多 1. 简介 本文主要是java使用neo4j driver操作neo4j的模板项目及非常有用的工具类,主要包括: 图…

Tesserocr 的安装步骤

Tesserocr 的安装 OCR&#xff0c;即 Optical Character Recognition&#xff0c;光学字符识别。是指通过扫描字符&#xff0c;然后通过其形状将其翻译成电子文本的过程。那么对于图形验证码来说&#xff0c;它都是一些不规则的字符&#xff0c;但是这些字符确实是由字符稍加扭…

精确运算为什么不能用double?

主要原因:就是因为double会导致数据不准确&#xff0c;不准确的原因如下所示 高于大小的比特会被自动删除&#xff0c;但是在删除的过程中还需要遵循 IEEE-754 规范&#xff0c;这就是我们理解的删除不应该会让数变小吗&#xff1f;为什么计算机的计算会变大? 如果最后一位是1…

Ubuntu20.04安装FloodLight最新版本

Ubuntu20.04安装FloodLight最新版本 网上的很多教程尝试了一下都不对&#xff0c;并且很多都是基于Ubuntu14的旧版本系统&#xff0c;其中的Python环境大多是基于2.0的&#xff0c;由于本人所使用的系统是Ubuntu20.04&#xff0c;后再油管澳大利亚某个学校的网络教学视频的帮助…

2024年大唐杯备考

努力更新中…… 第一章 网络架构和组网部署 1.1 5G的网络整体架构 5G网络中的中传、回传、前传&#xff08;这里属于承载网的概念&#xff09; CU和DU之间是中传 BBU和5GC之间是回传 BBU和AAU之间是前传&#xff08;这个好记&#xff09; 这里竟然还藏了MEC&#xff08;…

【Linux】centos 7 vim默认一个tab键相当于8个空格 -> 修改成4个空格

专栏文章索引&#xff1a;Linux 有问题可私聊&#xff1a;QQ&#xff1a;3375119339 目录 一、项目场景 二、问题描述 三、原因分析 四、解决方案 1.仅本次 2.永久 一、项目场景 使用vim编辑器编写python3代码 二、问题描述 在使用vim编辑器时&#xff0c;想要缩进&am…

LangChain-25 ReAct 让大模型自己思考和决策下一步 AutoGPT实现途径、AGI重要里程碑

背景介绍 大模型ReAct&#xff08;Reasoning and Acting&#xff09;是一种新兴的技术框架&#xff0c;旨在通过逻辑推理和行动序列的构建&#xff0c;使大型语言模型&#xff08;LLM&#xff09;能够达成特定的目标。这一框架的核心思想是赋予机器模型类似人类的推理和行动能…

Qt快速入门(Opencv小案例之人脸识别)

Qt快速入门&#xff08;Opencv小案例之人脸识别&#xff09; 编译出错记录 背景 因为主要使用qt&#xff0c;并且官网下载的win版本的编译好的opencv默认是vc的&#xff0c;所以我们需要自己下载opencv的源码使用mingw自行编译&#xff0c;我直接使用的vscode。 报错 报错…

1.9 数据结构之 并查集

编程总结 在刷题之前需要反复练习的编程技巧&#xff0c;尤其是手写各类数据结构实现&#xff0c;它们好比就是全真教的上乘武功 本栏目为学习笔记参考&#xff1a;https://leetcode.cn/leetbook/read/disjoint-set/oviefi/ 1.0 概述 并查集&#xff08;Union Find&#xff09…

以C++为例详解UML

以C为例详解UML —— 2024-04-14 文章目录 以C为例详解UML1. 什么是UML?2. UML模型结构3. UML中类的表示4. UML中类之间的关系4.1 泛化4.2 实现4.3 关联(1) 单向关联(2) 双向关联(3) 自关联(4) 多重关联 4.4 聚合4.5 组合4.6 依赖 5. 关联、组合、聚合与依赖的区别6. 补充笔…

华为机考入门python3--(15)牛客15-求int型正整数在内存中存储时1的个数

分类&#xff1a;二进制 知识点&#xff1a; int转二进制 binary bin(n)[2:] 题目来自【牛客】 def count_ones_in_binary(n): # 将输入的整数转换为二进制字符串 # bin(n)为0b11011binary bin(n)[2:]# 初始化计数器为0 count 0 # 遍历二进制字符串的每一位 fo…

消息队列RabbitMQ入门学习

目录 1.初识MQ 1.1.同步调用 1.2.异步调用 1.3.技术选型 2.RabbitMQ 2.1.收发消息 2.1.1.交换机 2.1.2.队列 2.1.3.绑定关系 2.1.4.发送消息 3.SpringAMQP 3.1WorkQueues模型 3.1.1消息接收 3.1.2测试 3.1.3.能者多劳 3.1.3.总结 3.2.交换机类型 3.3.Fanout交…

Golang | Leetcode Golang题解之第28题找出字符串中第一个匹配项的下标

题目&#xff1a; 题解&#xff1a; func strStr(haystack, needle string) int {n, m : len(haystack), len(needle)if m 0 {return 0}pi : make([]int, m)for i, j : 1, 0; i < m; i {for j > 0 && needle[i] ! needle[j] {j pi[j-1]}if needle[i] needle[…

【微信小程序——案例——本地生活(列表页面)】

案例——本地生活&#xff08;列表页面&#xff09; 九宫格中实现导航跳转——以汽车服务为案例&#xff08;之后可以全部实现页面跳转——现在先实现一个&#xff09; 在app.json中添加新页面 修改之前的九宫格view改为navitage 效果图&#xff1a; 动态设置标题内容—…

【Java】内存可见性问题是什么?

文章目录 内存模型内存可见性解决方案volatile 内存模型 什么是JAVA 内存模型&#xff1f; Java Memory Model (JAVA 内存模型&#xff09;是描述线程之间如何通过内存(memory)来进行交互。 具体说来&#xff0c; JVM中存在一个主存区&#xff08;Main Memory或Java Heap Mem…

wpf下RTSP|RTMP播放器两种渲染模式实现

技术背景 在这篇blog之前&#xff0c;我提到了wpf下播放RTMP和RTSP渲染的两种方式&#xff0c;一种是通过控件模式&#xff0c;另外一种是直接原生RTSP、RTMP播放模块&#xff0c;回调rgb&#xff0c;然后在wpf下渲染&#xff0c;本文就两种方式做个说明。 技术实现 以大牛直…

信息系统项目管理师0051:管理基础(4信息系统管理—4.1管理方法—4.1.1管理基础)

点击查看专栏目录 文章目录 第四章 信息系统管理4.1管理方法4.1.1管理基础1.层次结构2.系统管理第四章 信息系统管理 在信息技术和数据资源要素的推动下,社会各领域已经并正在加速进入数字化的全新发展时期,基于智能、网络和大数据的新经济业态正在形成,从“数字融合”向“数…

OpenCV4.9图像金字塔

目标 在本教程中&#xff0c;您将学习如何&#xff1a; 使用 OpenCV 函数 pyrUp()和 pyrDown()对给定图像进行下采样或上采样。 理论 注意 下面的解释属于 Bradski 和 Kaehler 的 Learning OpenCV 一书。 通常&#xff0c;我们需要将图像转换为与原始图像不同的大小。为此…

CleanMyMac一键释放Mac潜力的智能助手

在数字化时代&#xff0c;我们的Mac电脑承载着日益增多的数据和文件&#xff0c;使得系统性能逐渐下降&#xff0c;运行缓慢。为了解决这个问题&#xff0c;我们需要一款能够深度清理、优化Mac性能的软件。CleanMyMac&#xff0c;作为Mac系统清理领域的佼佼者&#xff0c;凭借其…