npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

abstractless

v0.1.0

Published

A headless component designed for creating customized Post-Abstract-AI in Vue.

Downloads

4

Readme

Abstractless

基于 TianliGPT,参考 Post-Abstract-AI

安装

$ pnpm i abstractless

用法

<script lang="ts" setup>
    import AbstractLess from "abstractless";

    const abstractProps = { /* 一些配置 */ };
</script>

<template>
    <AbstractLess v-bind="abstractProps" v-slot="{ error, pending, summary, fetchAbstract }">
        <!-- 自定义视图结构 -->
    </AbstractLess>
</template>
import { useAbstract } from "abstractless";

const abstractOptions = { /* 一些配置 */ };
const { error, pending, summary, fetchAbstract } = useAbstract(abstractOptions);

你也可以直接使用包里封装好的简易组件:

<script lang="ts" setup>
    import { AbstractMore } from "abstractless";

    const abstractProps = { /* 一些配置 */ };
</script>

<template>
    <AbstractMore v-bind="abstractProps"/>
</template>

API

useAbstract

向 TianliGPT 发送请求,返回摘要。

export declare function useAbstract(options?: UseAbstractOptions): {
    error: Ref<Error>,
    pending: Ref<boolean>,
    summary: Ref<string>,
    fetchAbstract: () => void
}

UseAbstractOptions

target

  • Type: MaybeRefOrGetter<HTMLElement | string>

  • Default: null

文章容器元素或其 CSS 选择器。

content

  • Type: MaybeRefOrGetter<string>

  • Default: null

文章内容,优先于 target 属性生效。

waitFor

  • Type: MaybeRefOrGetter<boolean>

  • Default: true

defer 属性不为 true 时,将在组件挂载后等待此属性为 Truthy 值时延迟发送请求。

defer

  • Type: boolean

  • Default: false

如果为 true,则不会在组件挂载完毕后立即发送请求。

timeout

  • Type: number

  • Default: 20000

请求超时的时长。

wordLimit

  • Type: number

  • Default: 1000

文章提交的字数限制。

tianliKey

  • Type: number

  • Required

TianliGPT 的请求密钥。

useTyping

使用打字特效。

export declare function useTyping(text: MaybeRefOrGetter<string>, options?: UseTypingOptions): {
    isTyping: Ref<boolean>,
    typedText: Ref<string>,
    run: () => void,
    stop: () => void
}

UseTypingOptions

speed

  • Type: number

  • Default: 40

每秒输出的字数。

punctuation

  • Type: Regexp

  • Default: /[,.!?:;,。、!?:;]/

判断是否为标点的正则表达式。

punctuationSpeedMultiplier

  • Type: number

  • Default: 6

当最后一个输出的字符被判断为标点时,输出下一个字符的延时倍率。