added copy clipboard
parent
1f5d1b2641
commit
ca0093dfa4
|
@ -0,0 +1,64 @@
|
|||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faCopy, faCheck } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
const CodeBlock = ({ children }) => {
|
||||
const textareaRef = useRef(null);
|
||||
const [codeString, setCodeString] = useState('');
|
||||
const [copied, setCopied] = useState(false); // New state variable
|
||||
|
||||
useEffect(() => {
|
||||
if (textareaRef.current) {
|
||||
setCodeString(textareaRef.current.textContent || '');
|
||||
}
|
||||
}, [children]);
|
||||
|
||||
const handleCopyClick = () => {
|
||||
if (codeString) {
|
||||
navigator.clipboard.writeText(codeString).then(() => {
|
||||
setCopied(true); // Set copied state to true
|
||||
setTimeout(() => setCopied(false), 3000); // Reset after 3 seconds
|
||||
|
||||
//alert('Code copied to clipboard!');
|
||||
}, () => {
|
||||
alert('Failed to copy code!');
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ position: 'relative', borderRadius: '5px', top: '20px' }}>
|
||||
<pre style={{ margin: 0, padding: '0px', fontSize: '1.1em' }}>
|
||||
<code ref={textareaRef} style={{fontSize: '0.9em' }}>
|
||||
{children}
|
||||
</code>
|
||||
</pre>
|
||||
<button
|
||||
onClick={handleCopyClick}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '10px',
|
||||
right: '10px',
|
||||
backgroundColor: 'transparent',
|
||||
border: 'none',
|
||||
borderRadius: '5px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.5em',
|
||||
transition: 'color 0.3s',
|
||||
}}
|
||||
//onMouseOver={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.style.color = '#007bff'}
|
||||
//onMouseOut={(e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.style.color = 'black'}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={copied ? faCheck : faCopy}
|
||||
size="2x"
|
||||
style={{ opacity: 0.5 }}
|
||||
onMouseOver={(e: React.MouseEvent<SVGSVGElement>) => e.currentTarget.style.opacity = '1'}
|
||||
onMouseOut={(e: React.MouseEvent<SVGSVGElement>) => e.currentTarget.style.opacity = '0.5'}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CodeBlock;
|
|
@ -0,0 +1,22 @@
|
|||
import cn from 'clsx'
|
||||
import type { ComponentProps, ReactElement } from 'react'
|
||||
|
||||
export const Button = ({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}: ComponentProps<'button'>): ReactElement => {
|
||||
return (
|
||||
<button
|
||||
className={cn(
|
||||
'nextra-button nx-transition-all active:nx-opacity-50',
|
||||
'nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-1.5',
|
||||
'dark:nx-bg-primary-300/10 dark:nx-border-white/10 dark:nx-text-gray-400 dark:hover:nx-text-gray-50',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,19 @@
|
|||
import type { ComponentProps, ReactElement } from 'react'
|
||||
|
||||
export function CheckIcon(props: ComponentProps<'svg'>): ReactElement {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
width="1em"
|
||||
height="1em"
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,47 @@
|
|||
import type { ComponentProps, ReactElement } from 'react'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { CheckIcon } from './check'
|
||||
import { CopyIcon } from './copy'
|
||||
import { Button } from './button'
|
||||
|
||||
export const CopyToClipboard = ({
|
||||
getValue,
|
||||
...props
|
||||
}: {
|
||||
getValue: () => string
|
||||
} & ComponentProps<'button'>): ReactElement => {
|
||||
const [isCopied, setCopied] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (!isCopied) return
|
||||
const timerId = setTimeout(() => {
|
||||
setCopied(false)
|
||||
}, 2000)
|
||||
|
||||
return () => {
|
||||
clearTimeout(timerId)
|
||||
}
|
||||
}, [isCopied])
|
||||
|
||||
const handleClick = useCallback<
|
||||
NonNullable<ComponentProps<'button'>['onClick']>
|
||||
>(async () => {
|
||||
setCopied(true)
|
||||
if (!navigator?.clipboard) {
|
||||
console.error('Access to clipboard rejected!')
|
||||
}
|
||||
try {
|
||||
await navigator.clipboard.writeText(getValue())
|
||||
} catch {
|
||||
console.error('Failed to copy!')
|
||||
}
|
||||
}, [getValue])
|
||||
|
||||
const IconToUse = isCopied ? CheckIcon : CopyIcon
|
||||
|
||||
return (
|
||||
<Button onClick={handleClick} title="Copy code" tabIndex={0} {...props}>
|
||||
<IconToUse className="nextra-copy-icon nx-pointer-events-none nx-h-4 nx-w-4" />
|
||||
</Button>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
import type { ComponentProps, ReactElement } from 'react'
|
||||
|
||||
export function CopyIcon(props: ComponentProps<'svg'>): ReactElement {
|
||||
return (
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke="currentColor"
|
||||
{...props}
|
||||
>
|
||||
<rect
|
||||
x="9"
|
||||
y="9"
|
||||
width="13"
|
||||
height="13"
|
||||
rx="2"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,82 @@
|
|||
import cn from 'clsx'
|
||||
import type { ComponentProps, ReactElement } from 'react'
|
||||
import { useCallback, useRef } from 'react'
|
||||
import { WordWrapIcon } from './word-wrap'
|
||||
import { Button } from './button'
|
||||
import { CopyToClipboard } from './copy-to-clipboard'
|
||||
import React from 'react'
|
||||
|
||||
|
||||
export const Pre = ({
|
||||
children,
|
||||
className,
|
||||
hasCopyCode = true,
|
||||
filename,
|
||||
...props
|
||||
}: ComponentProps<'pre'> & {
|
||||
filename?: string
|
||||
hasCopyCode?: boolean
|
||||
}): ReactElement => {
|
||||
const preRef = useRef<HTMLPreElement | null>(null);
|
||||
|
||||
const toggleWordWrap = useCallback(() => {
|
||||
const htmlDataset = document.documentElement.dataset;
|
||||
const hasWordWrap = 'nextraWordWrap' in htmlDataset;
|
||||
if (hasWordWrap) {
|
||||
delete htmlDataset.nextraWordWrap;
|
||||
} else {
|
||||
htmlDataset.nextraWordWrap = '';
|
||||
}
|
||||
}, []);
|
||||
|
||||
const renderChildren = () => {
|
||||
if (React.isValidElement(children) && children.type === 'code') {
|
||||
return children.props.children;
|
||||
}
|
||||
return children;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="nextra-code-block nx-relative nx-mt-6 first:nx-mt-0">
|
||||
{filename && (
|
||||
<div className="nx-absolute nx-top-0 nx-z-[1] nx-w-full nx-truncate nx-rounded-t-xl nx-bg-primary-700/5 nx-py-2 nx-px-4 nx-text-xs nx-text-gray-700 dark:nx-bg-primary-300/10 dark:nx-text-gray-200">
|
||||
{filename}
|
||||
</div>
|
||||
)}
|
||||
<pre
|
||||
className={cn(
|
||||
'nx-bg-primary-700/5 nx-mb-4 nx-overflow-x-auto nx-rounded-xl nx-subpixel-antialiased dark:nx-bg-primary-300/10 nx-text-[.9em]',
|
||||
'contrast-more:nx-border contrast-more:nx-border-primary-900/20 contrast-more:nx-contrast-150 contrast-more:dark:nx-border-primary-100/40',
|
||||
filename ? 'nx-pt-12 nx-pb-4' : 'nx-py-4',
|
||||
className
|
||||
)}
|
||||
ref={preRef}
|
||||
{...props}
|
||||
>
|
||||
{renderChildren()}
|
||||
</pre>
|
||||
<div
|
||||
className={cn(
|
||||
'nx-opacity-0 nx-transition [div:hover>&]:nx-opacity-100 focus-within:nx-opacity-100',
|
||||
'nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0',
|
||||
filename ? 'nx-top-8' : 'nx-top-0'
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
onClick={toggleWordWrap}
|
||||
className="md:nx-hidden"
|
||||
title="Toggle word wrap elvis"
|
||||
>
|
||||
<WordWrapIcon className="nx-pointer-events-none nx-h-4 nx-w-4" />
|
||||
</Button>
|
||||
{hasCopyCode && (
|
||||
<CopyToClipboard
|
||||
getValue={() =>
|
||||
preRef.current?.querySelector('code')?.textContent || ''
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
import type { ComponentProps, ReactElement } from 'react'
|
||||
|
||||
export function WordWrapIcon(props: ComponentProps<'svg'>): ReactElement {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" width="24" height="24" {...props}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
File diff suppressed because it is too large
Load Diff
|
@ -18,7 +18,11 @@
|
|||
},
|
||||
"homepage": "https://github.com/shuding/nextra-docs-template#readme",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.4.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.2",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"@vercel/analytics": "^0.1.11",
|
||||
"clsx": "^2.0.0",
|
||||
"next": "^13.0.6",
|
||||
"nextra": "^2.13.1",
|
||||
"nextra-theme-docs": "^2.13.1",
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import '@fortawesome/fontawesome-svg-core/styles.css';
|
||||
import type { AppProps } from 'next/app';
|
||||
import Script from 'next/script';
|
||||
import { Analytics } from '@vercel/analytics/react';
|
||||
|
@ -16,8 +17,10 @@ function MyApp({ Component, pageProps }: AppProps) {
|
|||
</Script>
|
||||
|
||||
<Component {...pageProps} />
|
||||
|
||||
<Analytics />
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -4,5 +4,4 @@ Prompt engineering is a relatively new discipline for developing and optimizing
|
|||
|
||||
This guide covers the basics of prompts to provide a rough idea of how to use prompts to interact and instruct LLMs.
|
||||
|
||||
All examples are tested with `text-davinci-003` using [OpenAI's playground](https://platform.openai.com/playground) unless otherwise specified. The model uses the default configurations, i.e., `temperature=0.7` and `top-p=1`.
|
||||
|
||||
All examples are tested with `text-davinci-003` using [OpenAI's playground](https://platform.openai.com/playground) unless otherwise specified. The model uses the default configurations, i.e., `temperature=0.7` and `top-p=1`.
|
|
@ -1,5 +1,6 @@
|
|||
# Basics of Prompting
|
||||
|
||||
|
||||
## Basic Prompts
|
||||
|
||||
You can achieve a lot with simple prompts, but the quality of results depends on how much information you provide it and how well-crafted it is. A prompt can contain information like the *instruction* or *question* you are passing to the model and include other details such as *context*, *inputs*, or *examples*. You can use these elements to instruct the model better and as a result get better results.
|
||||
|
@ -7,12 +8,13 @@ You can achieve a lot with simple prompts, but the quality of results depends on
|
|||
Let's get started by going over a basic example of a simple prompt:
|
||||
|
||||
*Prompt*
|
||||
```
|
||||
|
||||
```md
|
||||
The sky is
|
||||
```
|
||||
|
||||
*Output:*
|
||||
```
|
||||
```md
|
||||
blue
|
||||
|
||||
The sky is blue on a clear day. On a cloudy day, the sky may be gray or white.
|
||||
|
|
|
@ -1,6 +1,9 @@
|
|||
lockfileVersion: 5.4
|
||||
|
||||
specifiers:
|
||||
'@fortawesome/fontawesome-svg-core': ^6.4.2
|
||||
'@fortawesome/free-solid-svg-icons': ^6.4.2
|
||||
'@fortawesome/react-fontawesome': ^0.2.0
|
||||
'@types/node': 18.11.10
|
||||
'@vercel/analytics': ^0.1.11
|
||||
next: ^13.0.6
|
||||
|
@ -11,6 +14,9 @@ specifiers:
|
|||
typescript: ^4.9.3
|
||||
|
||||
dependencies:
|
||||
'@fortawesome/fontawesome-svg-core': 6.4.2
|
||||
'@fortawesome/free-solid-svg-icons': 6.4.2
|
||||
'@fortawesome/react-fontawesome': 0.2.0_n6er2j2sfff3f2kho72l4xukey
|
||||
'@vercel/analytics': 0.1.11_react@18.2.0
|
||||
next: 13.0.6_biqbaboplfbrettd7655fr4n2y
|
||||
nextra: 2.13.1_6jx7hpii6hgsrmhxgqrmo3277u
|
||||
|
@ -35,6 +41,39 @@ packages:
|
|||
resolution: {integrity: sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==}
|
||||
dev: false
|
||||
|
||||
/@fortawesome/fontawesome-common-types/6.4.2:
|
||||
resolution: {integrity: sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==}
|
||||
engines: {node: '>=6'}
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
|
||||
/@fortawesome/fontawesome-svg-core/6.4.2:
|
||||
resolution: {integrity: sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==}
|
||||
engines: {node: '>=6'}
|
||||
requiresBuild: true
|
||||
dependencies:
|
||||
'@fortawesome/fontawesome-common-types': 6.4.2
|
||||
dev: false
|
||||
|
||||
/@fortawesome/free-solid-svg-icons/6.4.2:
|
||||
resolution: {integrity: sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==}
|
||||
engines: {node: '>=6'}
|
||||
requiresBuild: true
|
||||
dependencies:
|
||||
'@fortawesome/fontawesome-common-types': 6.4.2
|
||||
dev: false
|
||||
|
||||
/@fortawesome/react-fontawesome/0.2.0_n6er2j2sfff3f2kho72l4xukey:
|
||||
resolution: {integrity: sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==}
|
||||
peerDependencies:
|
||||
'@fortawesome/fontawesome-svg-core': ~1 || ~6
|
||||
react: '>=16.3'
|
||||
dependencies:
|
||||
'@fortawesome/fontawesome-svg-core': 6.4.2
|
||||
prop-types: 15.8.1
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/@headlessui/react/1.7.10_biqbaboplfbrettd7655fr4n2y:
|
||||
resolution: {integrity: sha512-1m66h/5eayTEZVT2PI13/2PG3EVC7a9XalmUtVSC8X76pcyKYMuyX1XAL2RUtCr8WhoMa/KrDEyoeU5v+kSQOw==}
|
||||
engines: {node: '>=10'}
|
||||
|
@ -2434,6 +2473,11 @@ packages:
|
|||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
dev: false
|
||||
|
||||
/object-assign/4.1.1:
|
||||
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: false
|
||||
|
||||
/p-finally/1.0.0:
|
||||
resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}
|
||||
engines: {node: '>=4'}
|
||||
|
@ -2506,6 +2550,14 @@ packages:
|
|||
source-map-js: 1.0.2
|
||||
dev: false
|
||||
|
||||
/prop-types/15.8.1:
|
||||
resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
|
||||
dependencies:
|
||||
loose-envify: 1.4.0
|
||||
object-assign: 4.1.1
|
||||
react-is: 16.13.1
|
||||
dev: false
|
||||
|
||||
/property-information/6.2.0:
|
||||
resolution: {integrity: sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg==}
|
||||
dev: false
|
||||
|
@ -2528,6 +2580,10 @@ packages:
|
|||
scheduler: 0.23.0
|
||||
dev: false
|
||||
|
||||
/react-is/16.13.1:
|
||||
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
|
||||
dev: false
|
||||
|
||||
/react/18.2.0:
|
||||
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react'
|
||||
import { DocsThemeConfig } from 'nextra-theme-docs'
|
||||
import { useConfig } from 'nextra-theme-docs'
|
||||
import { Pre } from './components/pre'
|
||||
|
||||
const config: DocsThemeConfig = {
|
||||
logo: (
|
||||
|
@ -61,6 +62,12 @@ const config: DocsThemeConfig = {
|
|||
footer: {
|
||||
text: 'Copyright © 2023 DAIR.AI',
|
||||
},
|
||||
search: {
|
||||
placeholder: 'Search...',
|
||||
},
|
||||
components: {
|
||||
pre: Pre,
|
||||
},
|
||||
}
|
||||
|
||||
export default config
|
||||
|
|
|
@ -17,4 +17,4 @@
|
|||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue