ClickPrompt Logo ClickPrompt

ChatGPT Flow
学习资料
GitHub

ClickPrompt

我们在为 ClickPrompt 写一个发布日志，请根据下面的信息，帮我们写一个 v0.2.0 的更新日志，方便于普通开发人员了解变更。

  1. ClickPrompt 是一款专为 Prompt 编写者设计的工具，它支持多种基于 Prompt 的 AI 应用，例如 Stable Diffusion、ChatGPT 和 GitHub Copilot 等。 使用 ClickPrompt，您可以轻松地查看、分享和一键运行这些模型，同时提供在线的 Prompt 生成器，使用户能够根据自己的需求轻松创建符合要求的 Prompt，并与其他人分享。
  2. 对应的代码提交信息：

""" Features

  • add 2xl size for drawer (5b842ad)
  • add breadcrumb for detail (5cc911f)
  • add click prompt button (a2d75e5)
  • add clickprompt button for role play && closed #66 (385bf1f)
  • add clickprompt for sd generator (441a9d8)
  • add const.ts (b4be70e)
  • add conversation.ts (781c6b5)
  • add cpbird to general (48f7ea7)
  • add drawer prompt by steps (2e779ac)
  • add en readme as default (696ffe9)
  • add first popup (c83802d)
  • ...... """
ChatGPT Logo

"""

ClickPrompt v0.2.0 更新日志

这是一个重要的更新，它包含了多项新功能、修复和改进。ClickPrompt 现在支持更多的基于 Prompt 的 AI 应用，同时增强了 Prompt 生成器的功能。以下是此次更新的详细信息：

新功能

  • 增加了多个点击 Prompt 的按钮，包括适用于角色扮演的按钮。
  • 引入了在线的 Prompt 生成器，可根据用户的需求轻松创建符合要求的 Prompt，并与其他人分享。
  • 添加了新的功能，例如 Stable Diffusion、ChatGPT 和 GitHub Copilot 的支持，方便用户轻松地查看、分享和一键运行这些模型。
  • 添加了聊天室和交互式游戏功能，用户现在可以在 ClickPrompt 上与 AI 进行更多的交互。
  • 引入了可视化界面的 UI 改进，包括面包屑导航、分页组件、页面侧边栏等。
  • 添加了多语言支持，使用户可以使用自己喜欢的语言。

修复和改进

  • 修复了一些问题，例如在不同尺寸的屏幕上显示不正确、构建错误等。
  • 改进了部分功能的性能，例如使用 hugging face 接口 API 生成图片等。
  • 优化了界面的 SEO，提高了用户体验。
  • 添加了常量文件，提高了代码的可读性和可维护性。

此外，还有其他一些修复和改进，使 ClickPrompt 更加稳定和易于使用。感谢您的支持和反馈，我们会继续努力为您提供更好的产品和服务。 """

我们想在 ClickPrompt 上添加一个新的需求： 在 ClickPrompt 上使用 ChatGPT 自动创建 GitHub issue，以便于社区贡献者能更好的理解这个需求。输出需求：

""" Is your feature request related to a problem? Please describe.

No

Describe the solution you'd like

A clear and concise description of what you want to happen.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here. """

ChatGPT Logo

""" Is your feature request related to a problem? Please describe.

No

Describe the solution you'd like

I would like to be able to use ChatGPT to automatically create GitHub issues from within ClickPrompt. This would help community contributors better understand the requirements and goals of a given feature request.

Describe alternatives you've considered

Manually creating GitHub issues is a time-consuming process, and it can be difficult to ensure that all relevant information is included. By automating this process with ChatGPT, we can save time and improve the overall quality of the issues we create.

Additional context

Add any other context or screenshots about the feature request here. """

我们是 ClickPrompt 开源项目的贡献者，我们想让你为 ClickPrompt 添加一些新的功能。开始之前请阅读一下这些资料：

  • ClickPrompt 是一款专为 Prompt 编写者设计的工具，它支持多种基于 Prompt 的 AI 应用，例如 Stable Diffusion、ChatGPT 和 GitHub Copilot 等。 使用 ClickPrompt，您可以轻松地查看、分享和一键运行这些模型，同时提供在线的 Prompt 生成器，使用户能够根据自己的需求轻松创建符合要求的 Prompt，并与其他人分享。
  • ClickPrompt 包含了些页面组件：chatgpt、chatgpt-general、chatgpt-generator-cot、chatgpt-interactive-game、chatgpt-prompt-role-play、chatgpt-samples、chatgpt-flow、github-copilot-samples、resources、stable-diffusion-examples、stable-diffusion-generator
  • ClickPrompt 使用 Next.js、React、Chakra UI、Tailwind 等作为主要的开发框架，使用 Planetscale 作为数据库。

现在，我们想让你添加一个新的功能，即：feature: add tour guide for ClickPrompt。描述如下：

""" """

应该如何修改？直接给个示例？

ChatGPT Logo

要在 ClickPrompt 的首页中添加 Tour guide 的功能，可以使用 reactour 库。首先，需要安装 reactour:

npm install reactour

然后，在 ClickPrompt 的首页代码中，需要引入 reactour 的组件：

import Tour from 'reactour/dist/components/Tour/Tour';
import { useTour } from 'reactour/dist/hooks/useTour';

接着，在组件的 JSX 中添加 Tour 的代码：

<Provider>
  {/* https://github.com/vercel/next.js/issues/42292 */}
  {/* @ts-expect-error Async Server Component */}
  <NavBar locale={lang} />
  <Container maxW='8xl' p={{ md: "2rem", base: "1rem" }}>
    {children}
  </Container>
  </Provider>
  <div className='flex justify-center py-4'>
  <a
  className='flex gap-4 items-center'
  href='https://vercel.com?utm_source=prompt-engineering&utm_campaign=oss'
  target={"_blank"}
  >
  <span>Powered by</span>
  <Image
  height={24}
  width={116}
  src='https://images.ctfassets.net/e5382hct74si/78Olo8EZRdUlcDUFQvnzG7/fa4cdb6dc04c40fceac194134788a0e2/1618983297-powered-by-vercel.svg'
  alt='Vercel Logo'
  />
  </a>
  </div>
  <AnalyticsWrapper />
  <Tour
    steps={[
      {
        selector: '.navbar-nav > li:nth-child(1) > a',
        content: 'This is the ChatGPT section',
      },
      {
        selector: '.navbar-nav > li:nth-child(2) > a',
        content: 'This is the StableDiffusion section',
      },
      {
        selector: '.navbar-nav > li:nth-child(3) > a',
        content: 'This is the StableDiffusion Generator section',
      },
      {
        selector: '.navbar-nav > li:nth-child(4) > a',
        content: 'This is the GitHub Copilot section',
      },
      {
        selector: '.navbar-nav > li:nth-child(5) > a',
        content: 'This is the Resources section',
      },
    ]}
    isOpen={isTourOpen}
    onRequestClose={() => setIsTourOpen(false)}
  />

在以上代码中，steps 属性定义了 Tour 的每个步骤，其中 selector 指定了需要引导用户的组件的选择器，content 则是对该步骤的解释。isOpen 属性控制 Tour 的开关状态，onRequestClose 属性定义了关闭 Tour 的回调函数。

Powered byVercel Logo