The cover photo was taken on October 6, 2021, during my first visit to a night venue. I reserved a booth with friends, and I felt out of place among the diverse crowd.
This week I went on a business trip to Nanchang, where every trip is filled with hospitality rich in carbohydrates and local culture. I tend to be quiet, often becoming an observer during meals, and I always discover many interesting people and points. It's wonderful!
I skimmed through this book on the plane this week, and it's a very good book. It seems to talk about "creativity," but in essence, it conveys that there are many paths leading to the same destination. Here’s my favorite quote:
Deep down, each of us seems to possess a personal source of creativity. At the same time, there exists a broader, transcendent source that belongs to all humanity, containing various primitive and profound collective wisdom. This vast source may be within us, or we may have channels to access it.
After returning, I shared my feelings on social media with just three lines of text:
I saw that Vercel has also launched its own generative UI system, where you can input text to create a simple UI interface. It's quite similar to the previously shared screenshot-to-code.
This week, I tested this crawler framework to scrape content from my blog and fed it to my training model, and the results were quite good.
Feelings#
This week’s practice with AI was based on an open-source project: tts. Using the provided solution, I deployed a website for voice synthesis using Azure TTS on Cloudflare in less than 2 minutes: Voice Synthesis.
The entire solution is very simple. Just create a new worker on Cloudflare and write the following code:
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
function generateUUID() {
let uuid = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[x]/g, function (c) {
let r = Math.random() * 16 | 0,
v = c === 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
return uuid;
}
const API_URL = "https://southeastasia.api.speech.microsoft.com/accfreetrial/texttospeech/acc/v3.0-beta1/vcg/speak";
const DEFAULT_HEADERS = {
authority: "southeastasia.api.speech.microsoft.com",
accept: "*/*",
"accept-language": "zh-CN,zh;q=0.9",
customvoiceconnectionid: generateUUID(),
origin: "https://speech.microsoft.com",
"sec-ch-ua":
'"Google Chrome";v="111", "Not(A:Brand";v="8", "Chromium";v="111"',
"sec-ch-ua-mobile": "?0",
"sec-ch-ua-platform": '"Windows"',
"sec-fetch-dest": "empty",
"sec-fetch-mode": "cors",
"sec-fetch-site": "same-site",
"user-agent":
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36",
"content-type": "application/json",
};
const speechApi = async (ssml) => {
const data = JSON.stringify({
ssml,
ttsAudioFormat: "audio-24khz-160kbitrate-mono-mp3",
offsetInPlainText: 0,
properties: {
SpeakTriggerSource: "AccTuningPagePlayButton",
},
});
try {
const response = await fetch(API_URL, {
method: "POST",
responseType: "arraybuffer",
headers: DEFAULT_HEADERS,
body: data
});
if (!response.ok) {
throw new Error(`Request failed with status ${response.status}`);
}
return response.arrayBuffer();
} catch (error) {
console.error("Error during API request:", error);
throw error;
}
};
const handleRequest = async (request) => {
// Parse the request URL
const url = new URL(request.url);
const clientIP = request.headers.get("CF-Connecting-IP")
if (url.pathname == "/") {
const html = await fetch("https://files.chiloh.net/azure-tts.html")
const page = await html.text()
return new Response(page, {
headers: {
"content-type": "text/html;charset=UTF-8",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Headers": "*",
"Access-Control-Allow-Methods": "*",
"ip": `Access cloudflare's ip:${clientIP}`
},
})
} else if (url.pathname == "/audio") {
// Parse query parameters
const params = new URLSearchParams(url.search);
// Get the text from query parameters
const text = params.get("text");
// Get the rate from query parameters
const rate = params.get("rate");
// Get the pitch from query parameters
const pitch = params.get("pitch");
// Get the voice from query parameters
const voice = params.get("voice");
// Get the voice style from query parameters
const voiceStyle = params.get("voiceStyle");
const ssml = `<speak xmlns="http://www.w3.org/2001/10/synthesis" xmlns:mstts="http://www.w3.org/2001/mstts" xmlns:emo="http://www.w3.org/2009/10/emotionml" version="1.0" xml:lang="en-US">
<voice name="${voice}">
<mstts:express-as style="${voiceStyle}">
<prosody rate="${rate}%" pitch="${pitch}%">
${text}
</prosody>
</mstts:express-as>
</voice>
</speak>`;
const audio = await speechApi(ssml);
const nowtime = new Date().getTime();
return new Response(audio, {
headers: {
"Content-Type": "audio/mpeg",
"Content-Disposition": `attachment; filename=${nowtime}.mp3`,
},
});
} else if (url.pathname == "/legado") {
const origin = url.origin
const params = new URLSearchParams(url.search);
// Get the rate from query parameters
const rate = params.get("rate");
// Get the pitch from query parameters
const pitch = params.get("pitch");
// Get the voice from query parameters
const voice = params.get("voice");
// Get the voice style from query parameters
const voiceStyle = params.get("voiceStyle");
const dataJson = {
"concurrentRate": "",//concurrent rate
"contentType": "audio/mpeg",
"header": "",
"id": Date.now(),
"lastUpdateTime": Date.now(),
"loginCheckJs": "",
"loginUi": "",
"loginUrl": "",
"name": `Azure ${voice} ${voiceStyle} pitch: ${pitch} rate:${rate}`,
"url": `${origin}/audio?text={{speakText}}&rate=${rate}&pitch=${pitch}&voice=${voice}&voiceStyle=${voiceStyle},{"method":"GET"}`,
}
return new Response(JSON.stringify(dataJson), {
headers: {
"content-type": "application/json;charset=UTF-8",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Headers": "*",
"Access-Control-Allow-Methods": "*",
"ip": `Access cloudflare's ip:${clientIP}`
},
})
} else if (url.pathname == "/sourcereader") {
const origin = url.origin
const params = new URLSearchParams(url.search);
// Get the rate from query parameters
const rate = params.get("rate");
// Get the pitch from query parameters
const pitch = params.get("pitch");
// Get the voice from query parameters
const voice = params.get("voice");
// Get the voice style from query parameters
const voiceStyle = params.get("voiceStyle");
const dataJson = [{
"customOrder": 100,
"id": Date.now(),
"lastUpdateTime": Date.now(),
"name": ` ${voice} ${voiceStyle} pitch: ${pitch} rate:${rate}`,
"url": `${origin}/audio?text={{speakText}}&rate=${rate}&pitch=${pitch}&voice=${voice}&voiceStyle=${voiceStyle},{"method":"GET"}`,
}]
return new Response(JSON.stringify(dataJson), {
headers: {
"content-type": "application/json;charset=UTF-8",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Headers": "*",
"Access-Control-Allow-Methods": "*",
"ip": `Access cloudflare's ip:${clientIP}`
},
})
}
else {
return new Response("page", {
headers: {
"content-type": "text/html;charset=UTF-8",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": "true",
"Access-Control-Allow-Headers": "*",
"Access-Control-Allow-Methods": "*",
"ip": `Access cloudflare's ip:${clientIP}`
},
})
}
}
If you want to modify the page's style, you can change the URL in the line of code below to your adjusted front-end page URL:
const html = await fetch("https://files.chiloh.net/azure-tts.html")
Creating is becoming increasingly simple. If you have a good idea, just do it!