雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码
分享到：

前端之旅

去分类设置中添加分类描述吧

nodejs 脚本打包为可执行文件

2024-12-17admin阅读(63)评论(0)

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 笔记

2024-11-04admin阅读(124)评论(0)

我的第一个 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 同时运行多个脚本

2024-10-31admin阅读(179)评论(0)

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); // 输出错误信息
}

 

让你的照片动起来

2024-10-31admin阅读(118)评论(0)

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实践

2024-09-27admin阅读(611)评论(0)

首先,如何打包出 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 检测目标服务器是否异常

2024-07-29admin阅读(200)评论(0)

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加载及转发瓦片地图

2024-07-11admin阅读(253)评论(0)

服务端的转发服务

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代理提高开发效率

2024-06-18admin阅读(287)评论(0)

仓库地址: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内容

这样我们访问就会被直接拦截!

使用syncthing做多台服务器之间文件同步

2024-06-16admin阅读(266)评论(0)

下载:

wget https://github.com/syncthing/syncthing/releases/download/v1.5.0/syncthing-linux-amd64-v1.5.0.tar.gz

解压后运行 syncthing

生成配置文件后, 将

<address>127.0.0.1:8384</address>

改为

<address>0.0.0.0:8384</address>

开启端口即可访问到

如何配置内网同步

iShot_2024-06-16_18.05.10

video.js 对移动端的适配

2024-06-12admin阅读(348)评论(0)

先安装依赖

1
2
"video.js": "^8.12.0",
"videojs-mobile-ui": "^1.1.1",

安装完成后加入到项目

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
<style>
[v-cloak]{display: none;}
#my-video {
  width: 100%;
  height: 200px;
}
</style>
<template>
  <div class="cloak" v-cloak>
    <span>666</span>
    <div class="h20" style="height:20px"></div>
    <video id="my-video" class="video-js vjs-default-skin" controls preload="auto">
      <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
      // 播放 m3u8
      <source src="https://d2zihajmogu5jn.cloudfront.net/big-buck-bunny/master.m3u8">
      <p class="vjs-no-js">
        为了播放视频，请启用 JavaScript 并使用支持 HTML5 video 的浏览器。
      </p>
    </video>
  </div>
</template>
 
<script>
import 'video.js/dist/video-js.css';
import 'videojs-mobile-ui/dist/videojs-mobile-ui.css';
import videojs from 'video.js' // 引入 video.js
// https://www.npmjs.com/package/videojs-mobile-ui
require('videojs-mobile-ui');
export default {
  name: 'IndexPage',
  components: {},
  data() {
    return {}
  },
  methods: {
    onPlayerReady(player) {
      console.log('Player ready', player);
    },
    initializeVideoPlayer() {
      const player = videojs('my-video');
      player.fluid(true);
      player.mobileUi();
    }
  },
  mounted() {
    this.initializeVideoPlayer();
  },
}
</script>

 

具体介绍:

Touch controls:

  • Double-tap the left side of the player to rewind ten seconds
  • Double-tap the right side of the player to fast-forward ten seconds
  • Single-tap the screen to show a play/pause toggle

Fullscreen control:

  • Rotate to landscape to enter Fullscreen
  • Lock to fullscreen on rotate
  • Always lock to landscape when entering fullscreen (works even when device rotation is disabled/non-functional)
  • 1
  • 2
  • 3
  • 4
  • ...
  • 下一页
  • 共 16 页
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年1月
一 二 三 四 五 六 日
« 十二    
 12345
6789101112
13141516171819
20212223242526
2728293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说：
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说：
  • Dawn 8年前 (2016-09-16)说：
    call_user_func_array最后的例子是错哦，你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说：
    tp框架设置了全局捕获异常的，这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说：
    构造函数里的判断 用异常机制可能更好一些

左邻右舍

  • Brian's Blog
  • 易水寒
  • 楼教主
  • 贤心
  • 阿米龙

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图