直接在配置项搜索: Update
AI 编辑器 cursor 工具栏改成和 vscode 一样的左侧 竖向展示
在全景设置里面搜索: activityBar
nodejs 脚本打包为可执行文件
https://www.npmjs.com/package/pkg
新建 package.json
1 2 3 4 5 6 7 8 9 10 11 |
{ "name": "app", "version": "1.0.0", "bin": "index.js", "pkg": { "targets": [ "node16-linux-x64", "node16-macos-x64" ] } } |
执行 pkg .
就可以打包出来
刚试了效果还不错!
安全性未知,不建议把打包的代码传播到外部,
自己试试玩玩还是可以的
初学 python 笔记
我的第一个 hello world
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
from fastapi.responses import Response from io import BytesIO from GPT_SoVITS.TTS_infer_pack.TTS import TTS, TTS_Config import numpy as np import soundfile as sf from flask import Flask, jsonify app = Flask(__name__) tts_config_cache = {} # 缓存 TTS_Config 对象 def pack_wav(io_buffer: BytesIO, data: np.ndarray, rate: int): io_buffer = BytesIO() sf.write(io_buffer, data, rate, format='wav') return io_buffer def pack_audio(data: np.ndarray, rate: int, media_type: str): io_buffer = BytesIO() io_buffer = pack_wav(io_buffer, data, rate) io_buffer.seek(0) return io_buffer def get_tts_config(tts_infer_yaml_path): if tts_infer_yaml_path not in tts_config_cache: tts_config_cache[tts_infer_yaml_path] = TTS_Config(tts_infer_yaml_path) return tts_config_cache[tts_infer_yaml_path] def tts_handle(req: dict): # 打印传入的配置信息 print(f"传入的配置是: {req}") # 从传入的配置中获取是否启用流式模式的参数,若未提供则默认为False streaming_mode = req.get("streaming_mode", False) # 从传入的配置中获取所需的媒体类型,若未提供则默认为wav格式 media_type = req.get("media_type", "wav") # 从传入的配置中获取TTS推理配置文件的路径,若未提供则默认为"GPT_SoVITS/configs/tts_infer.yaml" tts_infer_yaml_path = req.get("tts_infer_yaml_path", "GPT_SoVITS/configs/tts_infer.yaml") # 根据提供的配置文件路径创建TTS配置对象 tts_config = get_tts_config(tts_infer_yaml_path) try: # 使用创建的TTS配置对象初始化TTS类的实例 tts_instance = TTS(tts_config) # 使用初始化的TTS实例处理输入请求,生成音频数据 tts_generator = tts_instance.run(req) # 获取生成的音频数据和采样率 sr, audio_data = next(tts_generator) # 将生成的音频数据打包成指定媒体类型的二进制数据 audio_data = pack_audio(audio_data, sr, media_type).getvalue() # 构建并返回包含音频数据和媒体类型的响应对象 return Response(audio_data, media_type=f"audio/{media_type}") except Exception as e: # 如果在处理请求过程中发生异常,打印错误信息并返回一个空响应对象 print(f"生成失败: {str(e)}") return Response("", media_type=f"audio/{media_type}") @app.route('/hello', methods=['GET']) def hello(): audio = tts_handle({ "text": "你好", "text_lang": "zh", "ref_audio_path": "666.mp3", "prompt_text": "", "prompt_lang": "zh", "top_k": 5, "top_p": 1, "temperature": 1, "text_split_method": "cut0", "batch_size": 1, "batch_threshold": 1, "speed_factor": 1.0, "split_bucket": True, "fragment_interval": 0.3, "seed": -1, "media_type": "wav", "streaming_mode": False, "parallel_infer": True, "repetition_penalty": 1.35, "tts_infer_yaml_path": "GPT_SoVITS/configs/tts_infer.yaml" }) print(f"生成结果: {audio}") return jsonify(message="Hello, World!") if __name__ == '__main__': app.run(debug=True, port=5001) |
nodejs 同时运行多个脚本
npm install -g parallel
假设你有三个脚本 script1.js
、script2.js
和 script3.js
,你可以使用以下命令并行执行它们:
1 2 |
parallel node ::: script1.js script2.js script3.js |
3.2. 传递参数
你可以传递参数给每个命令。例如,如果你有一个脚本可以接受参数:
1 |
parallel node script.js ::: arg1 arg2 arg3 |
PM2 支持
1 |
pm2 start "parallel node ::: 1.js 2.js 3.js" |
将 ffmpeg 的日志隐藏, 只记录错误!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const shell = require('shelljs'); // 定义你的 ffmpeg 命令 const ffmpegCommand = 'ffmpeg -i input.mp4 -c:v libx264 output.mp4'; // 使用 ShellJS 执行命令,并重定向标准输出 const result = shell.exec(ffmpegCommand + ' > /dev/null', { silent: true }); // 检查命令是否成功执行 if (result.code === 0) { console.log('FFmpeg executed successfully.'); } else { console.error('FFmpeg execution failed with the following error:'); console.error(result.stderr); // 输出错误信息 } |
让你的照片动起来
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Image Slider with SpriteSpin</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spritespin/4.0.0/spritespin.min.css"> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #333; } #spritespin { width: 600px; height: 400px; } </style> </head> <body> <div id="spritespin"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://unpkg.com/spritespin@4.0.3/release/spritespin.js"></script> <script> window.onload = () => { $('#spritespin').spritespin({ source: Array.from({ length: 12 }, (_, i) => `360/2/环物_${i + 1}.jpg`), width: 600, height: 400, frameTime: 60, animate: false, loop: false, stopFrame: 0, sense: -1, wrap: true }); } </script> </body> </html> |
vue工程项目动态加载umd.js实践
首先,如何打包出 umd.js
新建一个 xx.vue 组件, 写入代码后进行打包编译,
1 2 3 4 5 6 7 8 9 |
{ "name": "my-vue-component", "version": "1.0.0", "main": "dist/my-vue-component.umd.js", "scripts": { "serve": "vue serve xx.vue", "build": "vue build --target lib --name my-vue-component ./xx.vue" } } |
这里需要注意 打包的 –name ,指定为组件名称, 后续会使用到!
我们需要打包出干净的 umd.js 文件, 需要把 css 打包到 js 里, 在 xx.vue 同层目录里新建 vue.config.js
1 2 3 4 5 |
module.exports = { css: { extract: false } } |
配置就绪后正常打包 执行 npm run build
1 2 3 4 5 6 7 |
-rw-r--r-- 1 staff 289B Sep 27 18:03 demo.html -rw-r--r-- 1 staff 76K Sep 27 18:03 my-vue-component.common.js -rw-r--r-- 1 staff 98K Sep 27 18:03 my-vue-component.common.js.map -rw-r--r-- 1 staff 77K Sep 27 18:03 my-vue-component.umd.js -rw-r--r-- 1 staff 98K Sep 27 18:03 my-vue-component.umd.js.map -rw-r--r--@ 1 staff 26K Sep 27 18:03 my-vue-component.umd.min.js -rw-r--r-- 1 staff 115K Sep 27 18:03 my-vue-component.umd.min.js.map |
打包完成后将 umd.min.js 上传到 cdn 里, 后续使用!
打开自己的 Vue 工程项目, 准备使用这个 umd.js 文件
新增一个动态加载 js 的方法,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function loadComponent(url, componentName) { return new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = url; script.async = true; script.onload = () => { resolve(window[componentName]); }; script.onerror = () => { reject(new Error(`Failed to load script: ${url}`)); }; document.head.appendChild(script); }); } |
然后在项目里新建一个 Div, #novel-reader-container , 开始引入 umd.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<template> <div class="cloak"> <div id="novel-reader-container"></div> </div> </template> export default { name: 'IndexPage', components: {}, data() { return {} }, methods: {}, mounted() { const componentUrl = 'https://storage.xxx.com/xxx/js/test/my-vue-component.umd.min.js'; const componentName = 'my-vue-component'; loadComponent(componentUrl, componentName) .then((component) => { console.log(component) // 注册全局组件 this.$options.components[componentName] = component; // 使用 Vue.extend 将其转换为构造函数 const ComponentConstructor = this.$options._base.extend(component); // 动态创建并挂载组件实例 new ComponentConstructor().$mount('#novel-reader-container'); }) .catch((error) => { console.error('Error loading component:', error); }); }, } |
搞定, 页面正常渲染出组件内容!
此方法适用于所有 vue 项目, 可实现动态加载组件及项目的插件扩展!
使用 shell 检测目标服务器是否异常
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
#!/bin/bash # 服务器 IP 列表和对应的域名 servers=( "154.8.141.27 api.9kvr.cn" "49.232.211.54 api.9kvr.cn" "192.144.228.145 api.9kvr.cn" "62.234.66.75 api.9kvr.cn" "101.42.45.53 api.9kvr.cn" # ... 可以继续添加更多服务器 ) # 测试路径 test_path="/api/city/getNextCityNew" # 报警接口 URL 模板 alarm_url_template="https://vr.he29.com/xxx/xxx.html?ip=%s&code=%s" # 测试每个服务器的 URL for server in "${servers[@]}"; do ip=$(echo $server | cut -d' ' -f1) domain=$(echo $server | cut -d' ' -f2) url="https://$domain$test_path" echo "Testing $url via IP $ip..." # 使用 --resolve 选项在 curl 中指定 IP 解析,并设置超时时间为 10 秒 start_time=$(date +%s%3N | awk '{print int($1)}') response=$(curl -s -w "%{http_code}" -o /dev/null --resolve "$domain:80:$ip" $url) end_time=$(date +%s%3N | awk '{print int($1)}') duration=$(echo "scale=3; ($end_time - $start_time)" | bc) time=$(curl -s $url | jq -r '.time') if [ "$response" -eq 200 ]; then echo "Success: $url returned HTTP $response, IP: $(curl -s $url | jq -r '.ip'), Duration: $duration ms Time: $time" else echo "Error: $url returned HTTP $response, IP: $(curl -s $url | jq -r '.ip'), Duration: $duration ms Time: $time" # 构造报警接口的完整 URL alarm_url=$(printf "$alarm_url_template" "$ip" "$response") # 调用报警接口 curl -s --data-urlencode "ip=$ip" --data-urlencode "code=$response" "$alarm_url" fi echo "" done |
使用leaflet加载及转发瓦片地图
服务端的转发服务
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
const express = require('express'); const axios = require('axios'); const cors = require('cors'); const app = express(); const port = 3000; // 使用 cors 中间件 app.use(cors()); app.get('/tiles/:z/:x/:y', async (req, res) => { const { z, x, y } = req.params; const googleTileUrl = `https://mt1.google.com/vt/lyrs=s&x=${x}&y=${y}&z=${z}`; try { const response = await axios.get(googleTileUrl, { responseType: 'arraybuffer' }); res.set('Content-Type', 'image/png'); res.send(response.data); } catch (error) { console.error(error); res.status(500).send('Error fetching tile'); } }); app.listen(port, () => { console.log(`Tile proxy server running at http://localhost:${port}`); }); |
网页端的加载服务
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<!DOCTYPE html> <html> <head> <title>Leaflet Google Satellite Tiles</title> <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet-image/leaflet-image.js"></script> </head> <body> <div id="map" style="height: 80vh; width: 100vw;"></div> <button id="screenshotButton">Take Screenshot</button> <script> const map = L.map('map').setView([ 39.9042, 116.4074 ], 12); var tileLayer = L.tileLayer('http://localhost:3000/tiles/{z}/{x}/{y}', { maxZoom: 18, minZoom: 0, tileSize: 256, detectRetina: true, // 检测视网膜屏幕并加载高分辨率切片 }).addTo(map); // 加载失败 tileLayer.on('tileerror', function(event) { console.log('Tile failed to load:', event); }); // 添加标记 L.marker([34.5823, 105.9126]).addTo(map) .bindPopup('甘肃省天水市麦积区甘泉镇归风村') .openPopup(); // 截图按钮点击事件 document.getElementById('screenshotButton').addEventListener('click', function () { leafletImage(map, function (err, canvas) { if (err) { console.error(err); return; } // 将 Canvas 转换为图片 const img = document.createElement('img'); const dimensions = map.getSize(); img.width = dimensions.x; img.height = dimensions.y; img.src = canvas.toDataURL(); // 创建一个下载链接 const link = document.createElement('a'); link.href = img.src; link.download = 'map-screenshot.png'; link.appendChild(img); // 模拟点击下载链接 link.click(); }); }); </script> </body> </html> |
使用whistle代理提高开发效率
仓库地址:https://github.com/avwo/whistle
安装使用: npm install whistle -g
安装完成后,
在控制台使用 w2 启动,’
然后就可以看到
[i] whistle@2.9.22 started
[i] 1. use your device to visit the following URL list, gets the IP of the URL you can access:
http://127.0.0.1:8899/
http://10.0.7.99:8899/
http://0.0.1.1:8899/
http://169.254.87.0:8899/
http://169.254.137.154:8899/
Note: If all the above URLs are unable to access, check the firewall settings
For help see https://github.com/avwo/whistle
[i] 2. set the HTTP proxy on your device with the above IP & PORT(8899)
[i] 3. use Chrome to visit http://local.whistlejs.com/ to get started
从浏览器访问 http://127.0.0.1:8899/
在 rules 中新增规则:
比如host代理 127.0.0.1:10086 abc.def.com
比如将接口请求到 xx.com 的请求, body 里携带参数 abc=def 的请求, 返回 接口返回.json
规则: xx.com includeFilter://b:abc=def resBody://{ 接口返回.json}
我们回到 values 里, 增加 接口返回.json
在里面写入要响应的 json内容
这样我们访问就会被直接拦截!