<!DOCTYPE html>
<html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{ title }}</title>
<meta name="description" content="GPT4Free documentation for GPT4Free Documentation Hub. Complete guides, examples, and API reference for free AI endpoints, code generation, and AI model integration." />
<meta name="keywords" content="GPT4Free, G4F, AI documentation, free AI API, OpenAI alternative, JavaScript AI client, Python AI library, AI integration, code generation, GPT4Free Documentation Hub" />
<meta name="author" content="GPT4Free Team" />
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:title" content="GPT4Free Documentation Hub" />
<meta property="og:description" content="GPT4Free documentation for GPT4Free Documentation Hub. Free AI endpoints, examples, and comprehensive guides." />
<meta property="og:url" content="https://g4f.dev/docs/" />
<meta property="og:site_name" content="GPT4Free Documentation" />
<meta property="og:image" content="https://g4f.dev/dist/img/g4f-512x512.png" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="GPT4Free Documentation Hub | GPT4Free Documentation" />
<meta name="twitter:description" content="Free AI endpoints and comprehensive documentation for GPT4Free Documentation Hub." />
<meta name="twitter:image" content="https://g4f.dev/dist/img/g4f-512x512.png" />
<!-- Canonical -->
<link rel="canonical" href="https://g4f.dev/docs/" />
<link rel="apple-touch-icon" sizes="180x180" href="/dist/img/g4f-180x180.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/dist/img/g4f-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/dist/img/g4f-16x16.png" />
<link rel="manifest" href="/dist/img/site.webmanifest" />
<!-- GitHub Primer CSS & styles -->
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-74231a1f3bbb.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-8a995f0bacd4.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-225433424a87.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-b8b91660c29d.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-205098e9fedd.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/code-177d21388df8.css" />
<style>
:root {
--accent: #8b3dff;
--background: #16101b;
--text-primary: #ddd;
--text-secondary: #9b7dff;
--card-bg: #1e152e;
--border-color: #333;
--hover-color: #a67eff;
}
body {
margin: 0;
padding: 0;
background: var(--background);
color: var(--text-primary);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
line-height: 1.6;
min-height: 100vh;
}
.container {
display: flex;
max-width: 100%;
margin: 0;
padding: 2rem;
gap: 3rem;
min-height: calc(100vh - 4rem);
}
/* Enhanced main content styling */
main {
flex: 1;
background: var(--card-bg);
border-radius: 12px;
padding: 2.5rem;
box-shadow: 0 8px 30px rgba(0,0,0,0.7);
overflow-wrap: break-word;
position: relative;
}
/* Typography improvements */
.markdown-body h1 {
font-size: 2.8rem;
margin-bottom: 1rem;
font-weight: 700;
color: var(--text-primary);
border-bottom: 3px solid var(--accent);
padding-bottom: 0.5rem;
}
.markdown-body h2 {
margin-top: 3rem;
margin-bottom: 1rem;
border-bottom: 2px solid var(--accent);
padding-bottom: 0.25rem;
color: var(--text-primary);
}
.markdown-body h3 {
margin-top: 2rem;
margin-bottom: 0.8rem;
color: var(--text-primary);
}
.markdown-body p {
margin-bottom: 1.2rem;
color: var(--text-primary);
}
/* Enhanced link styling */
.markdown-body a {
color: var(--accent);
text-decoration: none;
transition: all 0.3s ease;
font-weight: 500;
}
.markdown-body a:hover,
.markdown-body a:focus {
color: var(--hover-color);
outline: none;
text-decoration: underline;
text-shadow: 0 0 8px rgba(139, 61, 255, 0.3);
}
/* Enhanced code block styling */
.markdown-body pre {
border-radius: 12px;
padding: 1.5rem !important;
font-size: 0.95rem !important;
overflow-x: auto;
max-height: 500px;
box-shadow: inset 0 0 12px rgba(0,0,0,0.6), 0 4px 20px rgba(0,0,0,0.4);
color: #fff;
border: 1px solid #3d2a5c;
position: relative;
}
.markdown-body code {
font-family: 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, Liberation Mono, Menlo, monospace;
background: rgba(139, 61, 255, 0.1);
padding: 0.2em 0.4em;
border-radius: 4px;
color: #e6ccff;
font-size: 0.9em;
}
.markdown-body pre code {
background: transparent;
padding: 0;
color: var(--fgColor-default, var(--color-fg-default))
}
/* Table styling */
.markdown-body table {
border-collapse: collapse;
width: 100%;
margin: 2rem 0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.markdown-body table th,
.markdown-body table td {
padding: 1rem;
text-align: left;
border: 1px solid var(--border-color);
}
.markdown-body table th {
background: var(--accent);
color: white;
font-weight: 600;
}
.markdown-body table tr:nth-child(even) {
background: rgba(139, 61, 255, 0.05);
}
.markdown-body table tr {
background-color: transparent;
}
/* List styling */
.markdown-body ul,
.markdown-body ol {
margin-bottom: 1.5rem;
padding-left: 2rem;
}
.markdown-body li {
margin-bottom: 0.5rem;
color: var(--text-primary);
}
/* Blockquote styling */
.markdown-body blockquote {
border-left: 4px solid var(--accent);
background: rgba(139, 61, 255, 0.1);
margin: 2rem 0;
padding: 1rem 1.5rem;
border-radius: 0 8px 8px 0;
}
/* HR styling */
.markdown-body hr {
border: none;
border-top: 2px solid var(--accent);
margin: 3rem 0;
opacity: 0.6;
}
/* Sticky table of contents */
nav#toc {
flex: 0 0 280px;
position: sticky;
top: 2rem;
background: var(--card-bg);
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.7);
max-height: calc(100vh - 4rem);
overflow-y: auto;
font-size: 0.9rem;
line-height: 1.5;
border: 1px solid rgba(139, 61, 255, 0.2);
}
nav#toc h2 {
font-size: 1.4rem;
margin: 0 0 1.5rem 0;
border-bottom: 2px solid var(--accent);
padding-bottom: 0.5rem;
color: var(--text-primary);
}
nav#toc ul {
list-style: none;
padding-left: 0;
margin: 0;
}
nav#toc li {
margin-bottom: 0.8rem;
}
nav#toc a {
color: var(--text-secondary);
text-decoration: none;
display: block;
padding: 0.3rem 0.5rem;
border-radius: 6px;
transition: all 0.3s ease;
}
nav#toc a:hover,
nav#toc a:focus {
background: rgba(139, 61, 255, 0.1);
color: var(--hover-color);
text-decoration: none;
transform: translateX(4px);
}
/* Responsive design */
@media (max-width: 1024px) {
.container {
flex-direction: column;
padding: 1rem;
gap: 2rem;
}
nav#toc {
position: relative;
max-height: none;
order: -1;
flex: none;
}
.markdown-body h1 {
font-size: 2.2rem;
}
}
@media (max-width: 768px) {
.container {
padding: 0.5rem;
}
main {
padding: 1.5rem;
}
.markdown-body h1 {
font-size: 1.8rem;
}
.markdown-body pre {
padding: 1rem !important;
font-size: 0.85rem !important;
}
}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Focus indicators */
*:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Print styles */
@media print {
.container {
display: block;
}
nav#toc {
display: none;
}
main {
box-shadow: none;
background: white;
color: black;
}
}
/* Loading animation for syntax highlighting */
.highlight-loading {
position: relative;
opacity: 0.7;
}
.highlight-loading::after {
content: 'Loading syntax highlighting...';
position: absolute;
top: 1rem;
right: 1rem;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
}
/* Translate Button Style */
#translate-toggle {
display: block;
background: var(--accent);
color: #fff;
text-align: center;
padding: 0.5rem;
border-radius: 6px;
margin-bottom: 1rem;
cursor: pointer;
font-size: 0.9rem;
border: none;
}
#google_translate_element {
margin-bottom: 1rem;
}
</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "TechArticle",
"headline": "GPT4Free Documentation Hub",
"description": "GPT4Free documentation for GPT4Free Documentation Hub. Complete guides, examples, and API reference for free AI endpoints.",
"author": {
"@type": "Organization",
"@id": "https://g4f.dev/#organization",
"name": "GPT4Free",
"url": "https://g4f.dev",
"logo": {
"@type": "ImageObject",
"url": "https://g4f.dev/dist/img/g4f-512x512.png"
}
},
"publisher": {
"@type": "Organization",
"@id": "https://g4f.dev/#organization"
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://g4f.dev/docs/"
},
"datePublished": "2024-01-01T00:00:00Z",
"dateModified": "2024-01-01T00:00:00Z",
"inLanguage": "en",
"isAccessibleForFree": true,
"keywords": "GPT4Free, AI documentation, free AI API, code generation",
"articleSection": "Documentation"
}
</script>
</head>
<body>
<div class="container">
<nav id="toc" aria-label="Table of contents" role="navigation">
<!-- Translation Button -->
<button id="translate-toggle">🌐 Translate Page</button>
<div id="google_translate_element" style="display:none;"></div>
<h2>Contents</h2>
<ul id="toc-list"></ul>
<hr style="margin: 1.5rem 0; opacity: 0.3;">
<ul>
<li><a href="/docs/" aria-label="Return to documentation home">📚 Documentation Hub</a></li>
<li><a href="/" aria-label="Return to main site">🏠 G4F Home</a></li>
</ul>
</nav>
<main role="main" class="markdown-body entry-content" itemprop="text" itemscope itemtype="https://schema.org/TechArticle">{{ article }}</main>
</div>
<script>
// Toggle Translation Widget
document.getElementById("translate-toggle").addEventListener("click", function() {
const el = document.getElementById("google_translate_element");
el.style.display = (el.style.display === "none") ? "block" : "none";
});
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
// Enhanced syntax highlighting with error handling
document.addEventListener('DOMContentLoaded', function() {
try {
// Generate table of contents
generateTableOfContents();
} catch (error) {
console.error('Error generating table of contents:', error);
}
});
function generateTableOfContents() {
const headings = document.querySelectorAll('main h2, main h3');
const tocList = document.getElementById('toc-list');
if (!tocList || headings.length === 0) return;
tocList.innerHTML = '';
headings.forEach(function(heading, index) {
const id = heading.id || `heading-${index}`;
if (!heading.id) {
heading.id = id;
}
const li = document.createElement('li');
const a = document.createElement('a');
a.href = `#${id}`;
a.textContent = heading.textContent;
a.setAttribute('aria-label', `Jump to ${heading.textContent}`);
if (heading.tagName === 'H3') {
li.style.marginLeft = '1rem';
li.style.fontSize = '0.9em';
}
li.appendChild(a);
tocList.appendChild(li);
});
}
// Smooth scrolling for anchor links
document.addEventListener('click', function(e) {
if (e.target.tagName === 'A' && e.target.getAttribute('href').startsWith('#')) {
e.preventDefault();
const target = document.querySelector(e.target.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
});
// Add copy button to code blocks
document.querySelectorAll('pre code, .highlight pre').forEach(function(block) {
const button = document.createElement('button');
button.textContent = 'Copy';
button.className = 'copy-button';
button.style.cssText = `
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: rgba(139, 61, 255, 0.8);
color: white;
border: none;
padding: 0.25rem 0.5rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.8rem;
opacity: 0;
transition: opacity 0.3s ease;
`;
const pre = block.parentElement;
pre.style.position = 'relative';
pre.appendChild(button);
pre.addEventListener('mouseenter', function() {
button.style.opacity = '1';
});
pre.addEventListener('mouseleave', function() {
button.style.opacity = '0';
});
button.addEventListener('click', function() {
navigator.clipboard.writeText(block.textContent).then(function() {
button.textContent = 'Copied!';
setTimeout(function() {
button.textContent = 'Copy';
}, 2000);
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en" data-color-mode="auto" data-light-theme="light" data-dark-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{{ title }}</title>
<meta name="description" content="GPT4Free documentation for GPT4Free Documentation Hub. Complete guides, examples, and API reference for free AI endpoints, code generation, and AI model integration." />
<meta name="keywords" content="GPT4Free, G4F, AI documentation, free AI API, OpenAI alternative, JavaScript AI client, Python AI library, AI integration, code generation, GPT4Free Documentation Hub" />
<meta name="author" content="GPT4Free Team" />
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:title" content="GPT4Free Documentation Hub" />
<meta property="og:description" content="GPT4Free documentation for GPT4Free Documentation Hub. Free AI endpoints, examples, and comprehensive guides." />
<meta property="og:url" content="https://g4f.dev/docs/" />
<meta property="og:site_name" content="GPT4Free Documentation" />
<meta property="og:image" content="https://g4f.dev/dist/img/g4f-512x512.png" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="GPT4Free Documentation Hub | GPT4Free Documentation" />
<meta name="twitter:description" content="Free AI endpoints and comprehensive documentation for GPT4Free Documentation Hub." />
<meta name="twitter:image" content="https://g4f.dev/dist/img/g4f-512x512.png" />
<!-- Canonical -->
<link rel="canonical" href="https://g4f.dev/docs/" />
<link rel="apple-touch-icon" sizes="180x180" href="/dist/img/g4f-180x180.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/dist/img/g4f-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/dist/img/g4f-16x16.png" />
<link rel="manifest" href="/dist/img/site.webmanifest" />
<!-- GitHub Primer CSS & styles -->
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/light-74231a1f3bbb.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/dark-8a995f0bacd4.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-primitives-225433424a87.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/primer-b8b91660c29d.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/global-205098e9fedd.css" />
<link crossorigin="anonymous" media="all" rel="stylesheet" href="https://github.githubassets.com/assets/code-177d21388df8.css" />
<style>
:root {
--accent: #8b3dff;
--background: #16101b;
--text-primary: #ddd;
--text-secondary: #9b7dff;
--card-bg: #1e152e;
--border-color: #333;
--hover-color: #a67eff;
}
body {
margin: 0;
padding: 0;
background: var(--background);
color: var(--text-primary);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
line-height: 1.6;
min-height: 100vh;
}
.container {
display: flex;
max-width: 100%;
margin: 0;
padding: 2rem;
gap: 3rem;
min-height: calc(100vh - 4rem);
}
/* Enhanced main content styling */
main {
flex: 1;
background: var(--card-bg);
border-radius: 12px;
padding: 2.5rem;
box-shadow: 0 8px 30px rgba(0,0,0,0.7);
overflow-wrap: break-word;
position: relative;
}
/* Typography improvements */
.markdown-body h1 {
font-size: 2.8rem;
margin-bottom: 1rem;
font-weight: 700;
color: var(--text-primary);
border-bottom: 3px solid var(--accent);
padding-bottom: 0.5rem;
}
.markdown-body h2 {
margin-top: 3rem;
margin-bottom: 1rem;
border-bottom: 2px solid var(--accent);
padding-bottom: 0.25rem;
color: var(--text-primary);
}
.markdown-body h3 {
margin-top: 2rem;
margin-bottom: 0.8rem;
color: var(--text-primary);
}
.markdown-body p {
margin-bottom: 1.2rem;
color: var(--text-primary);
}
/* Enhanced link styling */
.markdown-body a {
color: var(--accent);
text-decoration: none;
transition: all 0.3s ease;
font-weight: 500;
}
.markdown-body a:hover,
.markdown-body a:focus {
color: var(--hover-color);
outline: none;
text-decoration: underline;
text-shadow: 0 0 8px rgba(139, 61, 255, 0.3);
}
/* Enhanced code block styling */
.markdown-body pre {
border-radius: 12px;
padding: 1.5rem !important;
font-size: 0.95rem !important;
overflow-x: auto;
max-height: 500px;
box-shadow: inset 0 0 12px rgba(0,0,0,0.6), 0 4px 20px rgba(0,0,0,0.4);
color: #fff;
border: 1px solid #3d2a5c;
position: relative;
}
.markdown-body code {
font-family: 'SF Mono', 'Cascadia Code', 'Roboto Mono', Consolas, Liberation Mono, Menlo, monospace;
background: rgba(139, 61, 255, 0.1);
padding: 0.2em 0.4em;
border-radius: 4px;
color: #e6ccff;
font-size: 0.9em;
}
.markdown-body pre code {
background: transparent;
padding: 0;
color: var(--fgColor-default, var(--color-fg-default))
}
/* Table styling */
.markdown-body table {
border-collapse: collapse;
width: 100%;
margin: 2rem 0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.markdown-body table th,
.markdown-body table td {
padding: 1rem;
text-align: left;
border: 1px solid var(--border-color);
}
.markdown-body table th {
background: var(--accent);
color: white;
font-weight: 600;
}
.markdown-body table tr:nth-child(even) {
background: rgba(139, 61, 255, 0.05);
}
.markdown-body table tr {
background-color: transparent;
}
/* List styling */
.markdown-body ul,
.markdown-body ol {
margin-bottom: 1.5rem;
padding-left: 2rem;
}
.markdown-body li {
margin-bottom: 0.5rem;
color: var(--text-primary);
}
/* Blockquote styling */
.markdown-body blockquote {
border-left: 4px solid var(--accent);
background: rgba(139, 61, 255, 0.1);
margin: 2rem 0;
padding: 1rem 1.5rem;
border-radius: 0 8px 8px 0;
}
/* HR styling */
.markdown-body hr {
border: none;
border-top: 2px solid var(--accent);
margin: 3rem 0;
opacity: 0.6;
}
/* Sticky table of contents */
nav#toc {
flex: 0 0 280px;
position: sticky;
top: 2rem;
background: var(--card-bg);
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.7);
max-height: calc(100vh - 4rem);
overflow-y: auto;
font-size: 0.9rem;
line-height: 1.5;
border: 1px solid rgba(139, 61, 255, 0.2);
}
nav#toc h2 {
font-size: 1.4rem;
margin: 0 0 1.5rem 0;
border-bottom: 2px solid var(--accent);
padding-bottom: 0.5rem;
color: var(--text-primary);
}
nav#toc ul {
list-style: none;
padding-left: 0;
margin: 0;
}
nav#toc li {
margin-bottom: 0.8rem;
}
nav#toc a {
color: var(--text-secondary);
text-decoration: none;
display: block;
padding: 0.3rem 0.5rem;
border-radius: 6px;
transition: all 0.3s ease;
}
nav#toc a:hover,
nav#toc a:focus {
background: rgba(139, 61, 255, 0.1);
color: var(--hover-color);
text-decoration: none;
transform: translateX(4px);
}
/* Responsive design */
@media (max-width: 1024px) {
.container {
flex-direction: column;
padding: 1rem;
gap: 2rem;
}
nav#toc {
position: relative;
max-height: none;
order: -1;
flex: none;
}
.markdown-body h1 {
font-size: 2.2rem;
}
}
@media (max-width: 768px) {
.container {
padding: 0.5rem;
}
main {
padding: 1.5rem;
}
.markdown-body h1 {
font-size: 1.8rem;
}
.markdown-body pre {
padding: 1rem !important;
font-size: 0.85rem !important;
}
}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Focus indicators */
*:focus {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Print styles */
@media print {
.container {
display: block;
}
nav#toc {
display: none;
}
main {
box-shadow: none;
background: white;
color: black;
}
}
/* Loading animation for syntax highlighting */
.highlight-loading {
position: relative;
opacity: 0.7;
}
.highlight-loading::after {
content: 'Loading syntax highlighting...';
position: absolute;
top: 1rem;
right: 1rem;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.6);
}
/* Translate Button Style */
#translate-toggle {
display: block;
background: var(--accent);
color: #fff;
text-align: center;
padding: 0.5rem;
border-radius: 6px;
margin-bottom: 1rem;
cursor: pointer;
font-size: 0.9rem;
border: none;
}
#google_translate_element {
margin-bottom: 1rem;
}
</style>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "TechArticle",
"headline": "GPT4Free Documentation Hub",
"description": "GPT4Free documentation for GPT4Free Documentation Hub. Complete guides, examples, and API reference for free AI endpoints.",
"author": {
"@type": "Organization",
"@id": "https://g4f.dev/#organization",
"name": "GPT4Free",
"url": "https://g4f.dev",
"logo": {
"@type": "ImageObject",
"url": "https://g4f.dev/dist/img/g4f-512x512.png"
}
},
"publisher": {
"@type": "Organization",
"@id": "https://g4f.dev/#organization"
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://g4f.dev/docs/"
},
"datePublished": "2024-01-01T00:00:00Z",
"dateModified": "2024-01-01T00:00:00Z",
"inLanguage": "en",
"isAccessibleForFree": true,
"keywords": "GPT4Free, AI documentation, free AI API, code generation",
"articleSection": "Documentation"
}
</script>
</head>
<body>
<div class="container">
<nav id="toc" aria-label="Table of contents" role="navigation">
<!-- Translation Button -->
<button id="translate-toggle">🌐 Translate Page</button>
<div id="google_translate_element" style="display:none;"></div>
<h2>Contents</h2>
<ul id="toc-list"></ul>
<hr style="margin: 1.5rem 0; opacity: 0.3;">
<ul>
<li><a href="/docs/" aria-label="Return to documentation home">📚 Documentation Hub</a></li>
<li><a href="/" aria-label="Return to main site">🏠 G4F Home</a></li>
</ul>
</nav>
<main role="main" class="markdown-body entry-content" itemprop="text" itemscope itemtype="https://schema.org/TechArticle">{{ article }}</main>
</div>
<script>
// Toggle Translation Widget
document.getElementById("translate-toggle").addEventListener("click", function() {
const el = document.getElementById("google_translate_element");
el.style.display = (el.style.display === "none") ? "block" : "none";
});
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
// Enhanced syntax highlighting with error handling
document.addEventListener('DOMContentLoaded', function() {
try {
// Generate table of contents
generateTableOfContents();
} catch (error) {
console.error('Error generating table of contents:', error);
}
});
function generateTableOfContents() {
const headings = document.querySelectorAll('main h2, main h3');
const tocList = document.getElementById('toc-list');
if (!tocList || headings.length === 0) return;
tocList.innerHTML = '';
headings.forEach(function(heading, index) {
const id = heading.id || `heading-${index}`;
if (!heading.id) {
heading.id = id;
}
const li = document.createElement('li');
const a = document.createElement('a');
a.href = `#${id}`;
a.textContent = heading.textContent;
a.setAttribute('aria-label', `Jump to ${heading.textContent}`);
if (heading.tagName === 'H3') {
li.style.marginLeft = '1rem';
li.style.fontSize = '0.9em';
}
li.appendChild(a);
tocList.appendChild(li);
});
}
// Smooth scrolling for anchor links
document.addEventListener('click', function(e) {
if (e.target.tagName === 'A' && e.target.getAttribute('href').startsWith('#')) {
e.preventDefault();
const target = document.querySelector(e.target.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
}
});
// Add copy button to code blocks
document.querySelectorAll('pre code, .highlight pre').forEach(function(block) {
const button = document.createElement('button');
button.textContent = 'Copy';
button.className = 'copy-button';
button.style.cssText = `
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: rgba(139, 61, 255, 0.8);
color: white;
border: none;
padding: 0.25rem 0.5rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.8rem;
opacity: 0;
transition: opacity 0.3s ease;
`;
const pre = block.parentElement;
pre.style.position = 'relative';
pre.appendChild(button);
pre.addEventListener('mouseenter', function() {
button.style.opacity = '1';
});
pre.addEventListener('mouseleave', function() {
button.style.opacity = '0';
});
button.addEventListener('click', function() {
navigator.clipboard.writeText(block.textContent).then(function() {
button.textContent = 'Copied!';
setTimeout(function() {
button.textContent = 'Copy';
}, 2000);
});
});
});
</script>
</body>
</html>
