我如何使用 ChatGPT 和 Next.js 构建我的第一个开源项目。24 小时内有 10k 用户

最新推荐文章于 2026-06-25 15:08:15 发布
原创 最新推荐文章于 2026-06-25 15:08:15 发布 · 792 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#chatgpt #javascript #开源

介绍，我以前从未编码过，这对我来说看起来非常难，2 个月前我决定为什么不现在。🤷‍♀️

我的朋友建议我从开源项目开始，还帮助我完成了最初的简单设置步骤。

我几乎在每一步都使用了 ChatGpt，从弄清楚如何设置、安装、将 API 连接到代码的含义，如何重写函数或更改大小。

现在我要详细介绍一下我构建的第一个项目。

您将在本文中找到什么？

动图

我从🥚进化到🐥

🥚 第 1 步。设置环境🥚 第 2 步 。 查找
开源项目并在其 上 构建


 

我构建的项目是什么？

Linkedin Post Generator - 用于创建为 Linkedin 生成的 AI 的帖子生成器。

​​​​​​https://zhifj.com

在 GitHub 上telegeram1.com

动图

下面我分享了发布第一天并在 LinkedIn 上流行起来的所有统计数据。

为什么使用 Linkedin 帖子生成器？

首先，我在 Linkedin 平台上试验了一段时间。

我花了很多时间在 linkedin 上写帖子，比如每个帖子至少 1 小时，并且正在考虑捷径。🤯

因此，我分析了 100 多个不同的创作者和 300 多个不同的提示，以找到更快地生成更有效的帖子的方法。

所以，在这里我将逐步分享我所做的基础知识。

🥚 第 1 步. 设置环境

摆茶具

在我开始之前，我得到了设置包管理器的建议，比如 tea 来处理开发环境。

🥹 这些词在这一点上仍然是未知的“包管理器”

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>sh <(curl https://tea.xyz)

# --- OR ---
# using brew
brew install tea

</code></span></span>

当我得到它时，茶会帮助安装 node、npm、vercel 和我开发所需的任何其他包。

所以合而为一。

使用 TypeScript 和 Tailwindcss 设置 Next.js

我有一个基本的了解，即我需要前端。

我被教导从生成一个新的 Next.js 项目开始。同样使用 TypeScript 和 Tailwind CSS，所以请遵循以下步骤：

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>npx create-next-app

# ---
# you'll be asked the following prompts
What is your project named?  my-app
Would you like to add TypeScript with this project?  Y/N
# select `Y` for typescript
Would you like to use ESLint with this project?  Y/N
# select `Y` for ESLint
Would you like to use Tailwind CSS with this project? Y/N
# select `Y` for Tailwind CSS
Would you like to use the `src/ directory` with this project? Y/N
# select `N` for `src/` directory
What import alias would you like configured? `@/*`
# enter `@/*` for import alias
</code></span></span>

🥚 第 2 步。查找开源项目并在此基础上构建

我使用了这两个开源项目：

  1. Twitter Alghoritm GitHub - coryetzkorn/twitter-algorithm: The official Twitter ranking algorithm 所以我可以根据 Linkedin 的算法对用户的帖子输入进行评分。

2.推特生物生成器

https://github.com/Nultlope/twitterbio
这个帮助我弄清楚了如何连接 Open.AI 并用它为 Linkedin 生成帖子。在当前代码中它生成了 BIO

为了分别设置和打开每个项目，我将它们以 zip 格式下载到我的计算机上

🐣 Step.3 弄清楚代码

所以我有点被我所看到的震惊了，一开始我什么都想不通。

所以我做了什么，我向 ChatGPT 询问了我的应用程序的基本结构。

我把里面的每一个页面代码都抄下来，问它是做什么的，基本上就是问怎么修改。所以我开始有了一个更好的主意，应用程序前端在哪里，CSS 在哪里。

我仍然没有完全了解所有内容并且遗漏了这些东西，但我认为这绝对是快速学习。

我向 ChatGPT 提出的一些请求非常基本，现在对我来说真的很清楚，那时我问了所有问题，都是愚蠢的问题。

🐣 Step 4 构建项目

因此，在了解了一些基础知识之后，我继续进行自己的更改。开始在这些项目之上构建应用程序。

它有两部分=排名+生成器

Linkedin 帖子生成器算法

排名是根据不同的标准对您的帖子进行排名，从而提高性能。

我使用以下函数为 Linkedin 已知的内容改编了算法：

  1. 检测多个主题标签的功能
  2. 检测图像或视频的功能
  3. 检测帖子中网址的功能
  4. 支持使用表情符号的帖子的功能
  5. 宣传负面内容的功能
  6. 像后期格式化一样优先中断的功能。
  7. 减少行长度的功能
  8. 提问功能

与 Twitter 算法相比，Linkedin 并不公开。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>
<span style="color:var(--syntax-comment-color)">// function to detect multiple hashtags</span>
<span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">multipleHashtags</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">post</span> <span style="color:var(--syntax-text-color)">}:</span> <span style="color:var(--syntax-name-color)">PostData</span><span style="color:var(--syntax-text-color)">):</span> <span style="color:var(--syntax-name-color)">Rank</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">regex</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-string-color)">/#</span><span style="color:var(--syntax-literal-color)">[\w</span><span style="color:var(--syntax-string-color)">-</span><span style="color:var(--syntax-literal-color)">]</span><span style="color:var(--syntax-string-color)">+/g</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">hashtags</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">match</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">regex</span><span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">lowerCasePost</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">toLowerCase</span><span style="color:var(--syntax-text-color)">();</span>

  <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">hashtags</span> <span style="color:var(--syntax-error-color)">&&</span> <span style="color:var(--syntax-name-color)">hashtags</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span> <span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">0.5</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">`Too many hashtags.`</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-text-color)">};</span>
  <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">hashtags</span> <span style="color:var(--syntax-error-color)">&&</span> <span style="color:var(--syntax-name-color)">hashtags</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span> <span style="color:var(--syntax-error-color)"><=</span> <span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span>
      <span style="color:var(--syntax-name-color)">lowerCasePost</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">includes</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">#follow</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">||</span>
      <span style="color:var(--syntax-name-color)">lowerCasePost</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">includes</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">#comment</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">||</span>
      <span style="color:var(--syntax-name-color)">lowerCasePost</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">includes</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">#like</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">)</span>
    <span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">0.5</span><span style="color:var(--syntax-text-color)">,</span>
        <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">`Avoid using hashtags like "follow," "comment," or "like".`</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-text-color)">};</span>
    <span style="color:var(--syntax-text-color)">}</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">`Combine general and specific hashtags.`</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-text-color)">};</span>
  <span style="color:var(--syntax-text-color)">}</span>

  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1.0</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-comment-color)">// function to detect image or video</span>
<span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">imageVideoBoost</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">postMedia</span> <span style="color:var(--syntax-text-color)">}:</span> <span style="color:var(--syntax-name-color)">PostData</span><span style="color:var(--syntax-text-color)">):</span> <span style="color:var(--syntax-name-color)">Rank</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">has_media</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">postMedia</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">has_media</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">2.0</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-comment-color)">// message: `Contains image or video.`,</span>
    <span style="color:var(--syntax-text-color)">};</span>
  <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1.0</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-text-color)">}</span>


<span style="color:var(--syntax-comment-color)">// function to detect urls in post</span>
<span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">postHasUrl</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">post</span> <span style="color:var(--syntax-text-color)">}:</span> <span style="color:var(--syntax-name-color)">PostData</span><span style="color:var(--syntax-text-color)">):</span> <span style="color:var(--syntax-name-color)">Rank</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">regex</span> <span style="color:var(--syntax-error-color)">=</span>
    <span style="color:var(--syntax-string-color)">/https</span><span style="color:var(--syntax-literal-color)">?</span><span style="color:var(--syntax-string-color)">:</span><span style="color:var(--syntax-literal-color)">\/\/[\w</span><span style="color:var(--syntax-string-color)">-</span><span style="color:var(--syntax-literal-color)">]</span><span style="color:var(--syntax-string-color)">+</span><span style="color:var(--syntax-literal-color)">(\.[\w</span><span style="color:var(--syntax-string-color)">-</span><span style="color:var(--syntax-literal-color)">]</span><span style="color:var(--syntax-string-color)">+</span><span style="color:var(--syntax-literal-color)">)</span><span style="color:var(--syntax-string-color)">+</span><span style="color:var(--syntax-literal-color)">([\w</span><span style="color:var(--syntax-string-color)">.,@?^=%&amp;:</span><span style="color:var(--syntax-literal-color)">/</span><span style="color:var(--syntax-string-color)">~+#-</span><span style="color:var(--syntax-literal-color)">]</span><span style="color:var(--syntax-string-color)">*</span><span style="color:var(--syntax-literal-color)">[\w</span><span style="color:var(--syntax-string-color)">@?^=%&amp;</span><span style="color:var(--syntax-literal-color)">/</span><span style="color:var(--syntax-string-color)">~+#-</span><span style="color:var(--syntax-literal-color)">])?</span><span style="color:var(--syntax-string-color)">/g</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">urls</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">match</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">regex</span><span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">urls</span> <span style="color:var(--syntax-error-color)">&&</span> <span style="color:var(--syntax-name-color)">urls</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span> <span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">0.5</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">`Remove the link from post and add in comments.`</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-text-color)">};</span>
  <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1.0</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-text-color)">}</span>


<span style="color:var(--syntax-comment-color)">/**
 * Function to favor posts that use emojis 
 */</span>
<span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">emojis</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">sentiment</span> <span style="color:var(--syntax-text-color)">}:</span> <span style="color:var(--syntax-name-color)">PostData</span><span style="color:var(--syntax-text-color)">):</span> <span style="color:var(--syntax-name-color)">Rank</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">regex</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-text-color)">RegExp</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">[</span><span style="color:var(--syntax-literal-color)">\</span><span style="color:var(--syntax-string-color)">uD800-</span><span style="color:var(--syntax-literal-color)">\</span><span style="color:var(--syntax-string-color)">uDBFF][</span><span style="color:var(--syntax-literal-color)">\</span><span style="color:var(--syntax-string-color)">uDC00-</span><span style="color:var(--syntax-literal-color)">\</span><span style="color:var(--syntax-string-color)">uDFFF]</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">g</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">emojis</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">match</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">regex</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">||</span> <span style="color:var(--syntax-text-color)">[];</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">totalMatches</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">emojis</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">totalMatches</span> <span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1.5</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-comment-color)">// message: `Included ${totalMatches} emojis in the post.`,</span>
    <span style="color:var(--syntax-text-color)">};</span>
  <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">No emojis found in the post.</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">negative</span><span style="color:var(--syntax-string-color)">"</span>
  <span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-text-color)">}</span>


<span style="color:var(--syntax-comment-color)">/**
 * Promote negative content because it's more likely to go viral.
 * Hide anything positive or uplifting.
 */</span>
<span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">sentiment</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">sentiment</span> <span style="color:var(--syntax-text-color)">}:</span> <span style="color:var(--syntax-name-color)">PostData</span><span style="color:var(--syntax-text-color)">):</span> <span style="color:var(--syntax-name-color)">Rank</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">sentiment</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">comparative</span> <span style="color:var(--syntax-error-color)">>=</span> <span style="color:var(--syntax-literal-color)">0.5</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">sentiment</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">comparative</span> <span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-literal-color)">1.5</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1.5</span><span style="color:var(--syntax-text-color)">,</span>
        <span style="color:var(--syntax-comment-color)">// message: `Exceptionally positive.`,</span>
      <span style="color:var(--syntax-text-color)">};</span>
    <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">else</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1.1</span><span style="color:var(--syntax-text-color)">,</span>
        <span style="color:var(--syntax-comment-color)">// message: `Positive sentiment.`,</span>
      <span style="color:var(--syntax-text-color)">};</span>
    <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">else</span> <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">sentiment</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">comparative</span> <span style="color:var(--syntax-error-color)"><=</span> <span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-literal-color)">0.5</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">sentiment</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">comparative</span> <span style="color:var(--syntax-error-color)"><</span> <span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-literal-color)">1.5</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">0.5</span><span style="color:var(--syntax-text-color)">,</span>
        <span style="color:var(--syntax-comment-color)">// message: `Exceptionally negative.`,</span>
      <span style="color:var(--syntax-text-color)">};</span>
    <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">else</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">0.9</span><span style="color:var(--syntax-text-color)">,</span>
        <span style="color:var(--syntax-comment-color)">// message: `Negative sentiment.`,</span>
      <span style="color:var(--syntax-text-color)">};</span>
    <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">else</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-text-color)">};</span>
  <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-comment-color)">/**
 * Prioritize break like post formatting.
 */</span>
<span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">lineBreaks</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">sentiment</span> <span style="color:var(--syntax-text-color)">}:</span> <span style="color:var(--syntax-name-color)">PostData</span><span style="color:var(--syntax-text-color)">):</span> <span style="color:var(--syntax-name-color)">Rank</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">breaks</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">split</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">/</span><span style="color:var(--syntax-literal-color)">\n\s</span><span style="color:var(--syntax-string-color)">*</span><span style="color:var(--syntax-literal-color)">\n</span><span style="color:var(--syntax-string-color)">/</span><span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">totalBreaks</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">breaks</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span> <span style="color:var(--syntax-error-color)">-</span> <span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">totalBreaks</span> <span style="color:var(--syntax-error-color)">>=</span> <span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>

    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1.5</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-comment-color)">// message: `Used ${totalBreaks} line breaks.`,</span>
    <span style="color:var(--syntax-text-color)">};</span>
  <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">else</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">`Add line breaks between the lines.`</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">negative</span><span style="color:var(--syntax-string-color)">"</span>
    <span style="color:var(--syntax-text-color)">};</span>
  <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>

<span style="color:var(--syntax-comment-color)">/**
 * Reduce line length
 */</span>
<span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">lineLength</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">post</span> <span style="color:var(--syntax-text-color)">}:</span> <span style="color:var(--syntax-name-color)">PostData</span><span style="color:var(--syntax-text-color)">):</span> <span style="color:var(--syntax-name-color)">Rank</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">const</span> <span style="color:var(--syntax-name-color)">lines</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">split</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-literal-color)">\n</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">);</span>
  <span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">score</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-literal-color)">1.0</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-declaration-color)">for</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-declaration-color)">let</span> <span style="color:var(--syntax-name-color)">i</span> <span style="color:var(--syntax-error-color)">=</span> <span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-name-color)">i</span> <span style="color:var(--syntax-error-color)"><</span> <span style="color:var(--syntax-name-color)">lines</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">length</span><span style="color:var(--syntax-text-color)">;</span> <span style="color:var(--syntax-name-color)">i</span><span style="color:var(--syntax-error-color)">++</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">lines</span><span style="color:var(--syntax-text-color)">[</span><span style="color:var(--syntax-name-color)">i</span><span style="color:var(--syntax-text-color)">].</span><span style="color:var(--syntax-name-color)">length</span> <span style="color:var(--syntax-error-color)">></span> <span style="color:var(--syntax-literal-color)">200</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
        <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">0.9</span><span style="color:var(--syntax-text-color)">,</span>
        <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">`Reduce line length to improve readability (200 characters).`</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-text-color)">};</span>
    <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">,</span>
    <span style="color:var(--syntax-comment-color)">// message: `Good, keep line length 200 characters or less.`,</span>
    <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">positive</span><span style="color:var(--syntax-string-color)">"</span>
  <span style="color:var(--syntax-text-color)">};</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-comment-color)">/**
* Function to ask questions
*/</span>
<span style="color:var(--syntax-declaration-color)">function</span> <span style="color:var(--syntax-name-color)">questions</span><span style="color:var(--syntax-text-color)">({</span> <span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">sentiment</span> <span style="color:var(--syntax-text-color)">}:</span> <span style="color:var(--syntax-name-color)">PostData</span><span style="color:var(--syntax-text-color)">):</span> <span style="color:var(--syntax-name-color)">Rank</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-declaration-color)">if</span> <span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">includes</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">?</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">))</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1.5</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-comment-color)">// message: "Great! Questions can help to activate discussion"</span>
    <span style="color:var(--syntax-text-color)">};</span>
  <span style="color:var(--syntax-text-color)">}</span> <span style="color:var(--syntax-declaration-color)">else</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">score</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">1</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Add questions to activate discussion</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">negative</span><span style="color:var(--syntax-string-color)">"</span>
    <span style="color:var(--syntax-text-color)">};</span>
  <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>

</code></span></span>

算法的用户界面

它检测上面代码中的所有功能，并针对其中的一些功能展示如何改进帖子。我没有为所有功能调整它。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>  <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">(</span>
    <span style="color:var(--syntax-error-color)"><></span>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">div</span><span style="color:var(--syntax-error-color)">></span>
        <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">slider bg-gray-300 h-4 rounded-full relative overflow-hidden</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-error-color)">></span>
          <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">div</span>
            <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">classNames</span><span style="color:var(--syntax-text-color)">(</span>
              <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">absolute top-0 transition-width duration-250 ease-linear h-20</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
              <span style="color:var(--syntax-name-color)">sliderColor</span>
            <span style="color:var(--syntax-text-color)">)}</span>
            <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-text-color)">{{</span> <span style="color:var(--syntax-name-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">percentage</span> <span style="color:var(--syntax-text-color)">}}</span>
          <span style="color:var(--syntax-string-color)">/</span>>
        <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/div</span>>
        <span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-comment-color)">/* <p className="explanation text-gray-600 italic text-sm mt-2">
          Positive rankings result in greater reach 
        </p> */</span><span style="color:var(--syntax-text-color)">}</span>

        <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">ul</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">mt-5 p-0</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-error-color)">></span>
          <span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">positive</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">map</span><span style="color:var(--syntax-text-color)">((</span><span style="color:var(--syntax-name-color)">item</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">index</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">(</span>
            <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">li</span>
              <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">positive text-green-600 flex items-center space-x-2 list-style-none my-5 text-sm</span><span style="color:var(--syntax-string-color)">"</span>
              <span style="color:var(--syntax-name-color)">key</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-string-color)">`positive-</span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">index</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">}</span>
            <span style="color:var(--syntax-error-color)">></span>
              <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">span</span><span style="color:var(--syntax-error-color)">></span>👍<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/span</span>>
              <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">span</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">item</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">replace</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">/</span><span style="color:var(--syntax-literal-color)">\(\s</span><span style="color:var(--syntax-string-color)">*</span><span style="color:var(--syntax-literal-color)">[</span><span style="color:var(--syntax-string-color)">+-</span><span style="color:var(--syntax-literal-color)">]?\d</span><span style="color:var(--syntax-string-color)">+</span><span style="color:var(--syntax-literal-color)">\s</span><span style="color:var(--syntax-string-color)">*</span><span style="color:var(--syntax-literal-color)">\)</span><span style="color:var(--syntax-string-color)">/</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">)}</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/span</span>>
            <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/li</span>>
          <span style="color:var(--syntax-text-color)">))}</span>
          <span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">negative</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">map</span><span style="color:var(--syntax-text-color)">((</span><span style="color:var(--syntax-name-color)">item</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">index</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">(</span>
            <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">li</span>
              <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">negative text-red-600 flex items-center space-x-2 list-style-none my-1 text-sm</span><span style="color:var(--syntax-string-color)">"</span>
              <span style="color:var(--syntax-name-color)">key</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-string-color)">`negative-</span><span style="color:var(--syntax-text-color)">${</span><span style="color:var(--syntax-name-color)">index</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">`</span><span style="color:var(--syntax-text-color)">}</span>
            <span style="color:var(--syntax-error-color)">></span>
              <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">span</span><span style="color:var(--syntax-error-color)">></span>👎<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/span</span>>
              <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">span</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-name-color)">item</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">message</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">replace</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">/</span><span style="color:var(--syntax-literal-color)">\(\s</span><span style="color:var(--syntax-string-color)">*</span><span style="color:var(--syntax-literal-color)">[</span><span style="color:var(--syntax-string-color)">+-</span><span style="color:var(--syntax-literal-color)">]?\d</span><span style="color:var(--syntax-string-color)">+</span><span style="color:var(--syntax-literal-color)">\s</span><span style="color:var(--syntax-string-color)">*</span><span style="color:var(--syntax-literal-color)">\)</span><span style="color:var(--syntax-string-color)">/</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">)}</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/span</span>>
            <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/li</span>>
          <span style="color:var(--syntax-text-color)">))}</span>
        <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/ul</span>>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/div</span>>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">style</span> <span style="color:var(--syntax-name-color)">jsx</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">{</span><span style="color:var(--syntax-string-color)">`
        .slider:after {
          content: " ";
          display: block;
          width: 2px;
          height: 20px;
          position: absolute;
          top: 0;
          left: calc(25% - 1px);
          background: #000;
        }
      `</span><span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/style</span>>
    <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/</span>>
  <span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">};</span>

</code></span></span>

打开 AI Api 和提示生成器

我使用 handle Prompt 来生成帖子。还有类型过滤器，所以我有 5 个基于类型的不同提示。
我刚刚为此连接了我的 OpenAI API。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>const handlePrompt = () => {
    let prompt;
    switch (vibe) {

</code></span></span>

下面提示

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code> prompt = `Generate post using this prompt, based on ${post}.  You are a LinkedinGPT, a large language model that generates viral posts for Linkedin. You are given a prompt of a post and must generate a post that is more likely to be liked and reposted than the original post.
The Linkedin algorithm contains boosts and demotions based on what you are writing. Positive boosts are:

- in each post add emoji
- 200 characters in sentence maximum
- Start each sentecnce from new line and ad numbers in first 2 lines
- add 3 hashtags which 2 are generic and one very specific (at the end) Tags relate to post theme
- add a question at the end of the post to start a discussion. Before the hashtags
- first two lines should be catchy
- Dont add links - links are not good.
- If post copied in the field contain some numbers keep them the same.

Add idea about which image or visual can be added at the end of the post (this text is not counted as part of post)
${post}
---
Generated post length must be more than 800-1200 characters
---
Between each line must be a space
---
Keep all mentions of people in there
---
Start the firs line from smth like: I did smth, In year, I do, Tired of, Sometimes it is just, A path toward, Because this is not,I've been struggling,  (change the begginign depends on the context )
---
Add emoji if it fits
---
It should be a story`;
</code></span></span>

生成器接口

这是我的索引文件。来自帖子生成器。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>
      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">main</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">nav</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"bg-blue-900 text-white "</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"px-5"</span><span style="color:var(--syntax-text-color)">></span>
            <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"max-w-5xl mx-auto"</span><span style="color:var(--syntax-text-color)">></span>
              <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"flex justify-between items-center h-16 "</span><span style="color:var(--syntax-text-color)">></span>
                <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"flex items-center text-base "</span><span style="color:var(--syntax-text-color)">></span>
                  <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">a</span> <span style="color:var(--syntax-name-color)">target</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"_blank"</span>
                    <span style="color:var(--syntax-name-color)">href</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"https://www.linkedin.com/in/iuliia-shnai/"</span>
                    <span style="color:var(--syntax-name-color)">rel</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"noreferrer"</span>
                    <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"text-white flex max-w-fit items-center justify-center space-x-2 text-xl"</span>
                  <span style="color:var(--syntax-text-color)">></span>
                    <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span>👩‍💼<span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span>

                  <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">a</span><span style="color:var(--syntax-text-color)">></span>
                <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>

              <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
            <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">nav</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">section</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"py-10 lg:py-20 "</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-comment-color)">/* bg-[url('/image1.svg')] */</span><span style="color:var(--syntax-string-color)">}</span>
          <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"px-4"</span><span style="color:var(--syntax-text-color)">></span>
            <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"max-w-5xl mx-auto"</span><span style="color:var(--syntax-text-color)">></span>
              <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"w-full mx-auto"</span><span style="color:var(--syntax-text-color)">></span>
                <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h1</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"text-6xl text-center font-bold pb-1 text-slate-900"</span><span style="color:var(--syntax-text-color)">></span>

                  Linkedin Post Generator  🚀
                <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h1</span><span style="color:var(--syntax-text-color)">></span>
                <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">p</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"mt-3 mb-10 text-center"</span><span style="color:var(--syntax-text-color)">></span>
                  See how your post performs and generate a better one with AI. Time to go viral. <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">br</span> <span style="color:var(--syntax-text-color)">/></span>

                <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">p</span><span style="color:var(--syntax-text-color)">></span>
                <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"flex flex-col md:flex-row w-full md:space-x-20"</span><span style="color:var(--syntax-text-color)">></span>
                  <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"flex md:w-1/2 flex-col"</span><span style="color:var(--syntax-text-color)">></span>
                    <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h2</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"text-xl font-bold"</span><span style="color:var(--syntax-text-color)">></span>
                      Your Ranking
                    <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h2</span><span style="color:var(--syntax-text-color)">></span>
                    <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"pt-1"</span><span style="color:var(--syntax-text-color)">></span>
                      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Ranking</span> <span style="color:var(--syntax-name-color)">ranking</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">ranking</span><span style="color:var(--syntax-string-color)">}</span> <span style="color:var(--syntax-text-color)">/></span>
                    <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>

                    <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"w-full my-1 mx-auto"</span><span style="color:var(--syntax-text-color)">></span>
                      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Post</span>
                        <span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">post</span><span style="color:var(--syntax-string-color)">}</span>
                        <span style="color:var(--syntax-name-color)">setPost</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">setPost</span><span style="color:var(--syntax-string-color)">}</span>
                        <span style="color:var(--syntax-name-color)">media</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">media</span><span style="color:var(--syntax-string-color)">}</span>
                        <span style="color:var(--syntax-name-color)">setMedia</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">setMedia</span><span style="color:var(--syntax-string-color)">}</span>
                      <span style="color:var(--syntax-text-color)">/></span>
                    <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>

                    <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"flex mb-5 items-center space-x-3"</span><span style="color:var(--syntax-text-color)">></span>


                    <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
                    <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"block"</span><span style="color:var(--syntax-text-color)">></span>
                      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">DropDown</span> <span style="color:var(--syntax-name-color)">vibe</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">vibe</span><span style="color:var(--syntax-string-color)">}</span> <span style="color:var(--syntax-name-color)">setVibe</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">setVibe</span><span style="color:var(--syntax-string-color)">}</span> <span style="color:var(--syntax-text-color)">/></span>
                    <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
                    <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"my-4"</span><span style="color:var(--syntax-text-color)">></span>
                      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">button</span>
                        <span style="color:var(--syntax-name-color)">disabled</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">loading</span><span style="color:var(--syntax-string-color)">}</span>
                        <span style="color:var(--syntax-name-color)">onClick</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">)</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-name-color)">optimizePost</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">)</span><span style="color:var(--syntax-string-color)">}</span>
                        <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"bg-blue-800 font-medium rounded-md w-full text-white px-4 py-2 hover:bg-blue-600 disabled:bg-blue-800"</span>
                      <span style="color:var(--syntax-text-color)">></span>
                        <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">loading</span> <span style="color:var(--syntax-error-color)">&&</span> <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">LoadingDots</span> <span style="color:var(--syntax-name-color)">color</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"white"</span> <span style="color:var(--syntax-name-color)">style</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"large"</span> <span style="color:var(--syntax-text-color)">/></span><span style="color:var(--syntax-string-color)">}</span>
                        <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-error-color)">!</span><span style="color:var(--syntax-name-color)">loading</span> <span style="color:var(--syntax-error-color)">&&</span> <span style="color:var(--syntax-string-color)">`Generate new post `</span><span style="color:var(--syntax-string-color)">}</span>
                      <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">button</span><span style="color:var(--syntax-text-color)">></span>
                    <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>

                  <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
                  <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"flex md:w-1/2 md:flex-col"</span><span style="color:var(--syntax-text-color)">></span>
                    <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Toaster</span>
                      <span style="color:var(--syntax-name-color)">position</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"top-right"</span>
                      <span style="color:var(--syntax-name-color)">reverseOrder</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-string-color)">}</span>
                      <span style="color:var(--syntax-name-color)">toastOptions</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">duration</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">2000</span> <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span>
                    <span style="color:var(--syntax-text-color)">/></span>
                    <span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">optimizedPost</span> <span style="color:var(--syntax-error-color)">&&</span> <span style="color:var(--syntax-text-color)">(</span>
                      <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"my-1"</span><span style="color:var(--syntax-text-color)">></span>
                        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"flex justify-between items-center pb-2 border-b border-gray-300"</span><span style="color:var(--syntax-text-color)">></span>
                          <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">h2</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"text-xl font-bold"</span><span style="color:var(--syntax-text-color)">></span>
                            Your Generated Post
                          <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">h2</span><span style="color:var(--syntax-text-color)">></span>
                        <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
                        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"max-w-2xl my-4 mx-auto"</span><span style="color:var(--syntax-text-color)">></span>
                          <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span>
                            <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"bg-white rounded-xl shadow-md p-4 hover:bg-gray-100 transition cursor-copy border"</span>
                            <span style="color:var(--syntax-name-color)">onClick</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">()</span> <span style="color:var(--syntax-error-color)">=></span> <span style="color:var(--syntax-text-color)">{</span>
                              <span style="color:var(--syntax-text-color)">navigator</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">clipboard</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">write</span><span style="color:var(--syntax-text-color)">([</span>
                                <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">ClipboardItem</span><span style="color:var(--syntax-text-color)">({</span>
                                  <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">text/html</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">new</span> <span style="color:var(--syntax-name-color)">Blob</span><span style="color:var(--syntax-text-color)">([</span><span style="color:var(--syntax-name-color)">optimizedPost</span><span style="color:var(--syntax-text-color)">],</span> <span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">text/html</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-text-color)">}),</span>
                                <span style="color:var(--syntax-text-color)">}),</span>
                              <span style="color:var(--syntax-text-color)">]);</span>
                              <span style="color:var(--syntax-name-color)">toast</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">Post copied to clipboard</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-text-color)">{</span>
                                <span style="color:var(--syntax-name-color)">icon</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">📋</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-text-color)">,</span>
                              <span style="color:var(--syntax-text-color)">});</span>
                            <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span>
                            <span style="color:var(--syntax-name-color)">key</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-name-color)">optimizedPost</span><span style="color:var(--syntax-string-color)">}</span>
                          <span style="color:var(--syntax-text-color)">></span>
                            <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">p</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"text-black-700"</span> <span style="color:var(--syntax-name-color)">dangerouslySetInnerHTML</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">{</span><span style="color:var(--syntax-text-color)">{</span> <span style="color:var(--syntax-name-color)">__html</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">optimizedPost</span> <span style="color:var(--syntax-text-color)">}</span><span style="color:var(--syntax-string-color)">}</span> <span style="color:var(--syntax-text-color)">/></span>
                          <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
                        <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
                      <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
                    <span style="color:var(--syntax-text-color)">)</span><span style="color:var(--syntax-string-color)">}</span>

                  <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
                <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
              <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
            <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">section</span><span style="color:var(--syntax-text-color)">></span>
        <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-error-color)">div</span> <span style="color:var(--syntax-name-color)">className</span><span style="color:var(--syntax-text-color)">=</span><span style="color:var(--syntax-string-color)">"max-w-5xl mx-auto"</span><span style="color:var(--syntax-text-color)">></span>
          <span style="color:var(--syntax-text-color)"><</span><span style="color:var(--syntax-name-color)">Footer</span> <span style="color:var(--syntax-text-color)">/></span>
        <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">div</span><span style="color:var(--syntax-text-color)">></span>
      <span style="color:var(--syntax-text-color)"></</span><span style="color:var(--syntax-error-color)">main</span><span style="color:var(--syntax-text-color)">></span>
    <span style="color:var(--syntax-text-color)"></></span>
  <span style="color:var(--syntax-text-color)">);</span>
<span style="color:var(--syntax-text-color)">}</span>

</code></span></span>

🐥 Step 5 推送项目

最后一步，我准备好推动了。

我在 GitHub 上创建存储库

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>$ git remote add origin .. 
git branch -M main
git push -u origin main
</code></span></span>

并进一步在 Vercel 上创建帐户，用 Vercel 推送它并检查错误。

我推送的每一次更新

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>git add .

git commit -m “fix type”

git push
</code></span></span>

为了检查我使用的错误，所以我不会推送所有错误。ChatGPT 帮助修复了很多错误，而我什至不知道如何找到它们。

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code>npm run build
</code></span></span>

🐥 步骤 6. 社交分享和收集反馈

因为它是 linkedin 项目，所以我把帖子放在那里。它获得了 20 万次浏览量和仇恨者的病毒式传播：)

帖子链接
Login | InCareer

前 24 小时的统计数据：
⭐️ 20000 Linkedin 印象
⭐️ 7000 次网站浏览
⭐️ 600 次点赞
⭐️ 产生 11000 多个帖子
⭐️ 3+ 讨厌者
⭐️ 3+ 联合项目优惠

我现在在做什么？

我正在构建不同的微型工具并为现有的开源项目做出贡献。

本月挑战将 GitHub 上的 Papermark.io 增加到 1000 颗星。

papermark.io - Docsend 的开源替代品

给我们一颗星⭐️

动图

为什么是纸印？

我以前在 Docsend 上遇到过很多麻烦，当我试图筹集资金时，这让我很恼火。

所以我发现这个项目如果能进一步发展就会很有用。拥有开源替代品一样酷。

如果您正在构建一些开源项目，请与我分享👀

jascl
关注
ChatGPT-Next-Web使用技巧大全，教你如何用好gpt
sunsky89757的博客
02-19 6231
本文适用于对该程序有了初步了解的用户，我们整理了多个能够提升使用AI效果的方法和技巧，如果你能逐个掌握，相信会给你的工作和学习带来更多的帮助。
56K star！一键拥有跨平台 ChatGPT 应用：ChatGPT-Next-Web
IT咖啡馆
01-05 6501
今天我们推荐的开源项目是目前我用过最好的ChatGPT应用，让你一键拥有跨平台 ChatGPT 应用，在GitHub超过56K Star的开源项目：ChatGPT-Next-Web。
NextChat：一键部署你的私人ChatGPT网页应用
gitblog_01090的博客
05-19 2530
NextChat 是一个开源项目，旨在为用户提供一个简单快捷的方式来部署自己的私人 ChatGPT 网页应用。支持 GPT-3、GPT-4 以及 Gemini Pro 模型，NextChat 不仅适用于个人用户，还提供了企业版解决方案，满足企业私有化部署和定制需求。 ## 项目技术分析 NextChat 的技术架构基于现代 Web 开发技术栈，利用 Vercel 进行一键部署，简化了部署流程。
ChatGPT-Next-Web：Vercel+域名对接+API导入快速部署使用
weixin_52938153的博客
05-19 2196
本文讲解： 1、如何获取Github开源项目ChatGPT-Next-Web 2、如何部署至Vercel服务器 3、如何对接域名使用 4、API调用讲解 搭建不是重点，重点是教会大家如何自己搭建！以及我遇到的问题和经验汇总，一站式服务！
ChatGPT-Next-Web: 一键轻松拥有自己专属的 ChatGPT 网页服务
easylife206的专栏
04-11 2万+
公众号关注「奇妙的 Linux 世界」设为「星标」，每天带你玩转 Linux ！​今天给大家推荐一个非常好用的开源项目：ChatGPT-Next-Web。这个开源项目可以做到一键免费部署你的私人 ChatGPT 网页应用。如果部署Vercel，Vercel可以绑定自己的域名，或者配合Cloudflare自定义域名中转，应该可以让国内访问。主要功能：在 1 分钟内使用 Vercel 免费一键部署精...
ChatGPT-Next-Web：Vercel 和 Cloudflare 的快速部署
hinker的专栏
04-03 2万+
本文介绍了如何将 ChatGPT-Next-Web 部署到 Vercel 并在 Cloudflare 上加速，使用 SSL、CDN 和缓存等功能。ChatGPT Next Web是一个免费的一键部署私人ChatGPT网页应用程序，具有精心设计的UI、响应式设计和支持深色、浅色两种主题等功能。它还提供了海量内置提示列表（开发中）、自动压缩聊天记录以及一键以Markdown格式导出聊天记录等特性。用户可以使用OpenAI API Key开始部署，并可选择绑定自定义域名。
2小时用RTX3090从零训练GPT级小模型MiniMind
weixin_30527323的博客
06-17 306
GPT类大语言模型本质上是基于Transformer架构的自回归语言建模系统，其核心原理涵盖RoPE位置编码、SwiGLU激活、分组查询注意力等关键技术。通过模型结构精简（64M参数）、数据集压缩（GB级高质量t2t样本）与硬件精准匹配（RTX 3090+FP16混合精度），可在消费级显卡上实现端到端可复现训练。该技术路径显著降低LLM构建门槛，支撑本地化推理、Agent能力扩展及教育级白盒教学等场景，为开发者提供真正可调试、可理解、可演进的最小可行语言模型（MVP）。
ChatGPT真实工作流操作手册：从登录校验到会话管理的工程化实践
weixin_34198453的博客
06-23 307
大语言模型交互并非简单提问，而是一套涉及客户端环境、会话生命周期、上下文调度与安全策略的分布式系统。理解其底层原理——如浏览器指纹校验机制、会话ID的GPU资源绑定逻辑、上下文环形队列截断规则——是实现稳定输出的技术前提。这些机制直接决定提示词有效性、跨设备同步可靠性及企业级协作可追溯性。尤其在中文用户高频遭遇的代理适配、账号信任分偏低、Custom Instructions隐性失效等场景中，掌握OpenAI实际运行协议比学习万能模板更具工程价值。本文聚焦真实工作流中的60秒初始化链路、会话ID物理意义与锚
家用机跑80B代码模型？Qwen3-Coder-Next的MoE部署全解析
congju3179的博客
06-23 334
大语言模型（LLM）的本地化部署正从数据中心走向个人工作站，其核心突破在于稀疏专家混合（MoE）架构与高效量化技术的协同演进。MoE通过动态激活少量参数（如3B）显著降低显存压力，使80B级模型可在RTX 4090等消费级硬件上运行；结合Q4_K_XL等先进4-bit量化方案，兼顾精度与推理速度。该技术路径不仅提升单机AI编程效率，更推动开发者工作流重构——从查文档、写样板到自动调试与工具调用，实现‘生成-验证-修复’闭环。本文聚焦Qwen3-Coder-Next在Windows家用机上的实战部署，覆盖GG
企业级私有ChatGPT部署实战：Azure OpenAI+自建前端安全方案
weixin_30788239的博客
06-25 246
大语言模型（LLM）正从技术热点走向企业核心生产力工具，但数据安全与合规性成为落地最大瓶颈。其原理在于将模型推理能力托管于可信云平台，通过身份统一认证、网络隔离、会话加密存储与内容前置过滤等机制，实现数据不出域、行为可审计、权限可管控的技术闭环。该方案显著降低AI应用的法律与运营风险，适用于金融、制造、科技等强监管行业，尤其适合已具备Azure环境、亟需快速上线安全AI助手的中大型企业。本文聚焦Azure OpenAI Service与定制化Web前端的协同部署，覆盖模型授权、VNet专用终结点、Cosmo
GLM-5.1实战指南：开源大模型如何实现8小时自主工程任务
dianqi0560的博客
06-16 415
大语言模型在代码生成领域已从‘问答式辅助’迈向‘长周期自主工程’新阶段。其核心原理在于融合交错思考、状态快照与MoE稀疏推理的协同架构，突破传统LLM的记忆衰减与上下文失控瓶颈。技术价值体现在可审计的进度管理、低资源高稳定部署能力，以及对CI/CD、安全审查、系统级开发等工程场景的原生适配。尤其在离线环境、国产硬件（如昇腾910B）及成本敏感型团队中，GLM-5.1展现出显著的工程落地优势。本文聚焦其真实部署路径、状态持久化机制与长周期任务稳定性验证，为开发者提供可复现的开源AI工程师落地方案。
OpenClaw+DeepSeek构建可审计AI自动化执行体
weixin_34082695的博客
06-22 306
结构化自动化是企业级AI落地的核心范式，其本质在于将大模型推理纳入确定性工程闭环：通过事件驱动调度、Schema约束输出、全链路执行审计，实现任务可验证、结果可消费、行为可追溯。OpenClaw作为轻量级调度胶水层，不替代模型，而是强制规范Prompt输入与JSON输出契约；DeepSeek-Coder凭借原生高稳定JSON生成能力与低成本长上下文支持，成为该范式下最适配的推理引擎。典型应用场景包括CRM自动更新、工单智能分类、数据库一致性校验等需7×24小时稳定运行的生产任务，技术价值集中体现于错误率归零
Elastic：开发者上手指南
热门推荐
Elastic 中国社区官方博客
02-25 17万+
你们好，我是Elastic的刘晓国。如果大家想开始学习Elastic的话，那么这里将是你理想的学习园地。在我的博客几乎涵盖了你想学习的许多方面。在这里，我来讲述一下作为一个菜鸟该如何阅读我的这些博客文章。 我们可以按照如下的步骤来学习： 1)Elasticsearch简介：对Elasticsearch做了一个简单的介绍 2)Elasticsearch中的一些重要概念:cluster,n..........................................................
AI长期记忆系统Zep：从向量检索到上下文构建的工程实践
weixin_34354173的博客
06-23 408
在构建智能对话系统时，解决AI的上下文遗忘问题是提升用户体验的关键。其核心原理在于通过向量数据库实现语义检索，将对话历史转换为高维向量进行相似性匹配，从而精准召回相关信息。这项技术的工程价值在于能以较低成本突破模型上下文窗口限制，实现多轮对话的连贯性。典型的应用场景包括智能客服、个性化助手和数字员工等需要长期记忆的交互系统。本文以Zep为例，深入解析其双路检索机制和记忆处理流水线，展示如何通过结构化存储与智能摘要，让AI从简单的问答工具升级为拥有持久记忆的智能体。
AI Coding 零基础实战教程 （1）环境准备与工具安装
每天都要努力学习哦~~
06-13 210
三天后，一个功能完整、界面美观的Web应用上线了。这不是科幻，这是2026年正在发生的事情。传统的编程学习路径是这样的：花几个月学语法 → 花几个月做练习 → 花几个月做项目 → 终于能写出可用的软件。你只需要学会"如何清晰地表达你想要什么"，AI来负责把它变成代码。这就像你不需要学会砌墙、接水管、布电路，你只需要能清楚地告诉装修队"我想要一个什么样的家"，专业的团队会帮你实现。AI编程工具就是你的"装修队"，而你要学的，是如何当好这个"业主"。你平时用电脑，是通过鼠标点击图标、菜单来操作的，这叫。
MuleSoft+LLM企业级AI编排实战：构建可审计、可治理的智能工作流
最新发布
chuchen7021的博客
06-25 434
企业AI落地面临的核心挑战并非模型能力不足，而是缺乏将大语言模型（LLM）深度嵌入真实业务系统的语义化编排能力。AI编排（AI Orchestration）作为一种融合服务集成、上下文治理与安全执行的架构范式，正成为连接LLM与ERP/CRM/SAP等遗留系统的关键枢纽。其本质是通过集成平台（如MuleSoft）实现数据动态聚合、权限精准注入、Prompt工程标准化及全链路可观测性，从而解决安全合规断层、数据新鲜度断层与业务逻辑断层三大瓶颈。本文聚焦MuleSoft作为AI编排层的技术实践，涵盖DataWe
AI编排实战：MuleSoft+LangChain构建企业级AI交响中枢
weixin_33698823的博客
06-25 346
AI编排（AI Orchestration）是大模型落地企业核心业务的关键范式，其本质并非简单调用LLM API，而是通过统一数据契约、分层权限管控与可追溯推理链，实现多源异构系统（CRM/ERP/DB）与大语言模型的协同调度。它解决的是数据血缘不可溯、安全策略碎片化、错误归因失效等工程硬伤，技术价值在于将概率性AI输出转化为确定性业务动作。典型应用场景包括客户流失预警、智能挽留邮件生成、跨系统根因分析等。本文聚焦MuleSoft与LangChain双引擎协同架构，详解如何在Salesforce等生产环境中
网站集成GenAI Agent的工程实践指南
weixin_30399821的博客
06-20 410
GenAI Agent是一种具备意图理解、多步编排与服务调用能力的智能交互系统，其核心原理在于将大语言模型与业务逻辑解耦，通过状态机驱动、API网关中转和前后端分层协作实现可控执行。相比传统聊天机器人，它显著提升用户意图达成率与业务转化价值，在教育推荐、电商客服、SaaS产品引导等动态交互场景中效果突出。本文聚焦真实部署中的JavaScript前端接入、Python后端编排、OpenAI API工程化封装及Token上下文管理等关键技术环节，提供可直接复用的代码片段与避坑经验。
Notion AI高ROI工作流：7个经2000万人验证的生产力重构实践
weixin_30378623的博客
06-24 341
Notion AI并非通用大模型接口，而是一种嵌入式智能协作系统，其核心价值在于依托数据库结构实现环境感知与业务语义理解。区别于ChatGPT等无状态工具，它通过上下文粘性、Schema驱动提示和跨视图自动回填，将AI从‘内容生成器’升级为‘流程参与者’。这种能力显著降低信息捕获失真率、压缩结构化输出耗时、消除跨系统人工对齐成本——实测在会议纪要、客户反馈归因、周报推演等刚性场景中，稳定带来人均7+小时/周的有效时间增益。本文聚焦真实组织落地逻辑，解析如何基于数据库即API、动态骨架、语义翻译器等设计范式，
AI工具实操简报：8个可验证、可集成、可落地的生产力方案
weixin_34380948的博客
06-24 425
AI工具链不是抽象概念，而是解决真实工作瓶颈的技术组合——从PDF结构化解析到本地大模型部署，从统一API网关到声明式AI流程编排，其核心价值在于降低验证成本、缩短行动路径、保障集成可行性。围绕‘practical use cases’与‘AI tools’两大高频搜索需求，本简报聚焦无需GPU、兼容国内网络、开箱即用的轻量级方案，覆盖产品经理、运营、开发者等一线角色在文档处理、知识库构建、前端接入、调试优化等典型场景中的刚性需求，将大模型能力锚定在‘今天能跑通、下周能上线、下月见业务效果’的具体坐标上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值