diff --git a/src/content/post/shot.so - 图片美化工具.md b/src/content/post/shot.so - 图片美化工具.md new file mode 100644 index 0000000..6aeca4e --- /dev/null +++ b/src/content/post/shot.so - 图片美化工具.md @@ -0,0 +1,27 @@ +--- +title: shot.so +date: 2023-09-17 +author: KazooTTT +tags: + - 软件推荐 + - 图片处理 + - 设计 + - 图片美化工具 +finished: true +published: true +slug: shotso-image-beautification-tool +description: shot.so是一个图片美化工具，主要用于快速美化截图。它支持设备模拟，允许用户修改阴影、边框、比例等属性。该工具内置了大量免费模板，方便用户快速创建精美的图片效果。 +rinId: 62 +category: 软件 +toAstro: true +--- + +# shot.so - 图片美化工具 + + + +可快速美化图片（主要是截图），支持设备 mock，支持修改 shadow,border,scale 等。内置模板很多，且均免费。 + +![Shots - Create Amazing Mockups](https://pictures.kazoottt.top/2024/10/20241017-766f28bad432778d346657bc238dfb73.png) + +![954shots_so](https://pictures.kazoottt.top/2024/10/20241017-d72ee84203b24856d4dac28d1427c368.png) diff --git a/src/content/post/tweet to image 输入推特链接生成对应的图片.md b/src/content/post/tweet to image 输入推特链接生成对应的图片.md new file mode 100644 index 0000000..59ff725 --- /dev/null +++ b/src/content/post/tweet to image 输入推特链接生成对应的图片.md @@ -0,0 +1,42 @@ +--- +title: tweet to image +date: 2024-06-26 +author: KazooTTT +type: Post +status: Published +tags: + - Tweet-to-Image + - Twitter-Tools + - SocialMedia + - Online-Tools + - Image-Conversion + - Shareable-Content + - Digital-Marketing +finished: true +published: true +slug: tweet-to-image +description: This post introduces three online tools that allow users to convert tweets into shareable images. The tools featured are TweetPik, PostWizz, and 10015 Tools. These services provide an easy way to create visually appealing screenshots of tweets for sharing on various platforms. +NotionID-notionnext: 1203f3c5-7438-44af-a655-d509a4dff4ec +link-notionnext: https://kazoottt.notion.site/tweet-to-image-1203f3c5743844afa655d509a4dff4ec +rinId: 50 +category: 软件 +toAstro: true +--- + +# Tweet to Image 输入推特链接生成对应的图片 + +[Perfect Twitter Screenshots - TweetPik](https://tweethunter.io/tweetpik) + +![Pasted image 20240626165118](https://pictures.kazoottt.top/2024/06/20240626-107e2d31780d2e0e825f4f83caff1e21.png) + +[Free Tweet to Image Converter Online - PostWizz](https://postwizz.com/tweet-to-image-converter/) + +![CleanShot 2024-06-26 at 16.51.23](https://pictures.kazoottt.top/2024/06/20240626-569afec94aad21e529e2ebc1b7faf3c3.png) + +[Tweet to Image Converter: Tweet Screenshots Online | 10015 Tools](https://10015.io/tools/tweet-to-image-converter) + +![CleanShot 2024-06-26 at 16.51.45](https://pictures.kazoottt.top/2024/06/20240626-876ad7be2e0d7ffa185281d8a6494fad.png) + +ref： + +[The Top 6 Free Tools to Convert Tweets Into Shareable Images](https://www.makeuseof.com/free-tools-convert-tweets-into-images/) diff --git a/src/content/post/前端入门的项目.md b/src/content/post/前端入门的项目.md new file mode 100644 index 0000000..f9ad782 --- /dev/null +++ b/src/content/post/前端入门的项目.md @@ -0,0 +1,66 @@ +--- +title: 前端入门的项目 +date: 2024-04-11 +author: KazooTTT +tags: + - 前端入门 + - 项目学习 + - 前端框架 + - 博客开发 + - Gemini + - API + - GROQ + - GitHub项目 +finished: true +published: true +category: 随手记 +slug: projects-to-get-started-on-the-front-end +description: 这个项目列表提供了一些适合前端入门的项目建议，涵盖了基础知识学习、框架实践和个人项目开发等方面。其中包括了博客开发、UI设计、以及接入Gemini API和GROQ API等内容的示例。 +type: Post +status: Published +NotionID-notionnext: 42131976-4124-47ec-aaad-2a9dfc0516d6 +link-notionnext: https://kazoottt.notion.site/42131976412447ecaaad2a9dfc0516d6 +rinId: 51 +date_created: 2025-01-04T11:34:08+08:00 +date_modified: 2025-01-22T13:25:22+08:00 +toAstro: true +--- + +# 前端入门的项目 + +之前一个朋友问了我一下前端入门的项目，感觉是比较通用的，所以也同步到博客上吧。 + +--- + +我当时的学习路线是：先去 freecodecamp 学了一下前端的基础（css + js + html），做了它的练习之后对前端有一个大概的了解。 + +然后就是开始学框架做项目了。首先要挑一个框架作为主要的学习目标。这里有两种方式，一种是看文档学知识，另一种是从项目中去学习。 + +如果是文档的话，可以先看官方的文档，不需要记住所有的内容，对这个框架会有一个大概的了解，后面遇到问题检索一下关键词去搜索就可以了。 + +然后挑一个项目或者自己做项目来加深实践。 + +如果是看别的人项目，或者在别人的项目上休怪。目前前端比较适合入手的项目主要还是博客、gpt 的套壳 ui。 + +1. 博客的话，你可以想一下自己的博客里想加什么功能，或者看一下博客的某个功能是怎么实现的。比如说目录大概这个功能，它是怎么从一个 markdown 的内容中解析#标题，然后生成大纲的。怎么把自己 github 的热力图给嵌入到博客中，有哪些库可以使用，[GitHub - grubersjoe/react-activity-calendar: A flexible React component to display activity data in a calendar (heatmap).](https://github.com/grubersjoe/react-activity-calendar) 以及它的库实现思路。 + +这些博客都是做的很好的： + +[Cali Castle | 开发者、设计师、细节控、创始人](https://cali.so/) + +[静かな森 - 致虚极，守静笃。](https://innei.in/) + +1. gpt 的套壳的话目前比较火。现在 google gemini api、groq api 都是可以免费使用的。可以看一下别人是怎么接入它的，以及流式和非流式是怎么解析和展示的。比较经典的例子是： + （比较简洁） + +[GitHub - lobehub/lobe-chat: 🤯 Lobe Chat - an open-source, modern-design LLMs/AI chat framework. Supports Multi AI Providers( OpenAI / Claude 3 / Gemini / Perplexity / Bedrock / Azure / Mistral / Ollama ), Multi-Modals (Vision/TTS) and plugin system. One-click FREE deployment of your private ChatGPT chat application.](https://github.com/lobehub/lobe-chat)（大杂烩比较复杂） + +然后如果是自己做项目的话，可以想一下平时有没有遇到过什么不便利的地方，“要是 xxx 就好了”，我一般都会把这种想法存下来，然后有空的时候就去实现它。 + +![Pasted image 20240405180056](https://pictures.kazoottt.top/2024/04/20240411-63ea5846be622124eba970ce3738abf0.png) + +--- + +然后现在大模型也很用，无论是解释代码还是帮忙写代码。 + +可能开头的回答并不能拿来用，但是在完善提示词的过程中，也是对需求的进一步分析，写着写着自己也知道要怎么去做这个需求了。 diff --git a/src/content/post/在前端使用abort取消请求.md b/src/content/post/在前端使用abort取消请求.md new file mode 100644 index 0000000..11acf9c --- /dev/null +++ b/src/content/post/在前端使用abort取消请求.md @@ -0,0 +1,231 @@ +--- +title: 在前端使用abort取消请求 +date: 2024-04-17 +author: KazooTTT +type: Post +status: Draft +tags: + - 前端 + - request + - 网络 + - abortController + - 实践 +finished: true +published: true +slug: use-abort-on-the-frontend-to-cancel-the-request +description: 本文介绍了在不同前端框架中如何取消HTTP请求的方法。在原生JavaScript中，使用AbortController接口来实现请求的取消。在React中，通过useState和useEffect钩子管理AbortController的状态，并在组件卸载时自动取消请求。在SolidJS中，利用createSignal和onCleanup来处理AbortController，确保在需要时可以中断请求。这些方法都通过创建AbortController实例，并在fetch请求中使用其signal属性来控制请求的取消。 +NotionID-notionnext: 801e2fa1-dfa9-4b4f-b579-ef7f6658b9d3 +link-notionnext: https://kazoottt.notion.site/abort-801e2fa1dfa94b4fb579ef7f6658b9d3 +rinId: 53 +toAstro: true +date_created: 2025-01-04T11:34:08+08:00 +date_modified: 2025-01-22T13:27:26+08:00 +--- + +# 在前端使用 abort 取消请求 + +举个例子，在写 llm 的 chat 的时候，经常会出现需要取消请求的场景。 + +如何在**前端**取消请求，涉及到一个接口：[AbortController.AbortController() - Web API 接口参考 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/AbortController/AbortController) + +在原生的 js 的写法，参考 mdn 的写法。 + +```js +let controller +const url = "video.mp4" + +const downloadBtn = document.querySelector(".download") +const abortBtn = document.querySelector(".abort") + +downloadBtn.addEventListener("click", fetchVideo) + +abortBtn.addEventListener("click", () => { + if (controller) { + controller.abort() + controller = null + console.log("Download aborted") + } +}) + +function fetchVideo() { + controller = new AbortController() + const signal = controller.signal + fetch(url, { signal }) + .then((response) => { + console.log("Download complete", response) + }) + .catch((err) => { + console.error(`Download error: ${err.message}`) + }) +} +``` + +在 react 的写法 + +```jsx +import React, { useState, useEffect } from "react" + +const RequestComponent = () => { + const [responseData, setResponseData] = useState(null) + const [error, setError] = useState(null) + const [loading, setLoading] = useState(false) + const [controller, setController] = useState(null) + + useEffect(() => { + // 组件被卸载的时候，取消请求 + return () => { + if (controller) { + controller.abort() + } + } + }, [controller]) + + const fetchData = async () => { + setLoading(true) + setError(null) + + const abortController = new AbortController() + setController(abortController) + + try { + const response = await fetch("https://api.example.com/data", { + signal: abortController.signal, + }) + + if (!response.ok) { + throw new Error("Network response was not ok") + } + + const data = await response.json() + setResponseData(data) + } catch (error) { + if (error.name === "AbortError") { + console.log("Request canceled by user") + } else { + setError(error) + } + } finally { + setLoading(false) + } + } + + const cancelRequest = () => { + if (controller) { + controller.abort() + } + } + + return ( +
+ + + {error &&
Error: {error.message}
} + {responseData &&
Data: {JSON.stringify(responseData)}
} +
+ ) +} + +export default RequestComponent +``` + +在 solidjs 中的写法，可以参考 diu 老师的 [GitHub - anse-app/chatgpt-demo: Minimal web UI for ChatGPT.](https://github.com/anse-app/chatgpt-demo) + +```js +import { Index, Show, createEffect, createSignal, onCleanup, onMount } from 'solid-js' +import { useThrottleFn } from 'solidjs-use' +import { generateSignature } from '@/utils/auth' +import IconClear from './icons/Clear' +import MessageItem from './MessageItem' +import SystemRoleSettings from './SystemRoleSettings' +import ErrorMessageItem from './ErrorMessageItem' +import type { ChatMessage, ErrorMessage } from '@/types' + +export default () => { + const [controller, setController] = createSignal(null) + + + const requestWithLatestMessage = async() => { + setLoading(true) + setCurrentAssistantMessage('') + setCurrentError(null) + const storagePassword = localStorage.getItem('pass') + try { + const controller = new AbortController() + setController(controller) + const requestMessageList = messageList().slice(-maxHistoryMessages) + if (currentSystemRoleSettings()) { + requestMessageList.unshift({ + role: 'system', + content: currentSystemRoleSettings(), + }) + } + const timestamp = Date.now() + const response = await fetch('/api/generate', { + method: 'POST', + body: JSON.stringify({ + messages: requestMessageList, + time: timestamp, + pass: storagePassword, + sign: await generateSignature({ + t: timestamp, + m: requestMessageList?.[requestMessageList.length - 1]?.content || '', + }), + temperature: temperature(), + }), + signal: controller.signal, + }) + if (!response.ok) { + const error = await response.json() + console.error(error.error) + setCurrentError(error.error) + throw new Error('Request failed') + } + const data = response.body + if (!data) + throw new Error('No data') + + const reader = data.getReader() + const decoder = new TextDecoder('utf-8') + let done = false + + while (!done) { + const { value, done: readerDone } = await reader.read() + if (value) { + const char = decoder.decode(value) + if (char === '\n' && currentAssistantMessage().endsWith('\n')) + continue + + if (char) + setCurrentAssistantMessage(currentAssistantMessage() + char) + + isStick() && instantToBottom() + } + done = readerDone + } + } catch (e) { + console.error(e) + setLoading(false) + setController(null) + return + } + archiveCurrentMessage() + isStick() && instantToBottom() + } + + const stopStreamFetch = () => { + if (controller()) { + controller().abort() + ... + } + } + + + return ( + ... + ) +} +``` diff --git a/src/content/post/屏蔽推特黄推.md b/src/content/post/屏蔽推特黄推.md new file mode 100644 index 0000000..30e4494 --- /dev/null +++ b/src/content/post/屏蔽推特黄推.md @@ -0,0 +1,26 @@ +--- +title: 屏蔽推特黄推 +date: 2023-09-17 +author: KazooTTT +tags: + - twitter + - 油猴脚本 + - gray + - 项目推荐 + - 开源项目 +finished: true +published: true +slug: blocking-twitter-yellow-tweets +description: 推荐一个GitHub项目：daymade/Twitter-Block-Porn，该项目提供共享黑名单，可以一键拉黑所有发送假色情评论的诈骗账号，有效提升使用Twitter的体验。此方法比仅在网页上隐藏更有效，因为一旦拉黑，无论在手机端还是网页端，相关内容都会消失。 +rinId: 80 +date_created: 2025-01-04T11:34:08+08:00 +date_modified: 2025-01-22T13:29:40+08:00 +toAstro: true +--- + +# 屏蔽推特黄推 + +[GitHub - daymade/Twitter-Block-Porn: 共享黑名单, 一键拉黑所有黄推诈骗犯. Block scammers who sending fake porn comments, and help you improve your experience using Twitter.](https://github.com/daymade/Twitter-Block-Porn) +比仅在网页上隐藏好使，这个是直接 block 之后手机和网页端都会消失 + +![IMG-45EFC10972681E6F15A6C1944A81CD47](https://pictures.kazoottt.top/2025/01/20250122-45efc10972681e6f15a6c1944a81cd47.png)