google ai studio guide concept
· 1 year ago
c17b2bb6582edf3e5bb2ef528a2b8efdcfc59fca
Parent:
711a1b345
1 file changed +1237 −0
- google-ai-studio-guide.html +1237 −0
Diff
--- /dev/null +++ b/google-ai-studio-guide.html @@ -0,0 +1,1237 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Enhanced Google AI Studio - Settings Cheatsheet</title> + <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>"> + <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> + + <script type="application/ld+json"> + { + "@context": "https://schema.org", + "@type": "FAQPage", + "mainEntity": [{ + "@type": "Question", + "name": "What is Temperature in Google AI Studio?", + "acceptedAnswer": { + "@type": "Answer", + "text": "Temperature controls the randomness of the output in Google AI Studio. Lower values (e.g., 0.1-0.3) make the output more deterministic and focused, suitable for factual answers or code generation. Higher values (e.g., 0.8-1.0+) make it more creative and diverse, useful for brainstorming or imaginative writing. It influences token selection by rescaling logits." + } + },{ + "@type": "Question", + "name": "How does Top P work in Google AI Studio?", + "acceptedAnswer": { + "@type": "Answer", + "text": "Top P, or nucleus sampling, controls output randomness by selecting from the smallest set of tokens whose cumulative probability exceeds the P value. A Top P of 0.1 means only tokens in the top 10% probability mass are considered. It's an alternative or complement to Temperature for tuning response diversity." + } + }] + } + </script> + + <style> + :root { + --ai-studio-bg-primary: #202124; + --ai-studio-bg-secondary: #282a2d; + --ai-studio-bg-tertiary: #303134; + --ai-studio-bg-interactive: #3c4043; /* For interactive elements */ + --ai-studio-text-primary: #e8eaed; + --ai-studio-text-secondary: #bdc1c6; + --ai-studio-text-tertiary: #9aa0a6; + --ai-studio-border-color: #3c4043; + --ai-studio-border-highlight: #5f6368; + --ai-studio-accent-primary: #8ab4f8; + --ai-studio-accent-secondary: #a6c9ff; + --ai-studio-font-family: 'Google Sans', 'Roboto', sans-serif; + --ai-studio-icon-color: #9aa0a6; + --ai-studio-success-color: #34a853; + --ai-studio-warning-color: #fbbc04; + --ai-studio-danger-color: #ea4335; + } + + body { + background-color: var(--ai-studio-bg-primary); + font-family: var(--ai-studio-font-family); + color: var(--ai-studio-text-primary); + font-size: 14px; + line-height: 1.6; + padding-bottom: 3rem; + } + + .page-header { + background: linear-gradient(135deg, var(--ai-studio-bg-secondary) 0%, var(--ai-studio-bg-primary) 100%); + padding: 2.5rem 1.5rem; + text-align: left; + border-bottom: 1px solid var(--ai-studio-border-highlight); + margin-bottom: 1.5rem; /* Reduced margin */ + display: flex; + align-items: center; + justify-content: space-between; + position: sticky; + top: 0; + z-index: 1030; /* Ensure it's above Bootstrap modals backdrop */ + } + + .studio-logo-container .bi-gem { + font-size: 3rem; + color: var(--ai-studio-accent-primary); + filter: drop-shadow(0 0 5px var(--ai-studio-accent-secondary)); + } + .page-header-text h1 { + color: var(--ai-studio-text-primary); + font-weight: 700; /* Bolder */ + font-size: 2rem; /* Larger */ + margin-bottom: 0.25rem; + } + .page-header-text .lead { + color: var(--ai-studio-text-secondary); + font-size: 1.1rem; /* Slightly larger */ + margin: 0; + font-weight: 400; + } + .header-actions button { + margin-left: 0.5rem; + } + + .section-title { + color: var(--ai-studio-text-primary); + font-weight: 500; + font-size: 1.5rem; /* Increased size */ + padding-bottom: 1rem; + margin-top: 2.5rem; /* Increased top margin */ + margin-bottom: 1.8rem; + border-bottom: 2px solid var(--ai-studio-border-highlight); /* Thicker border */ + display: flex; + align-items: center; + } + .section-title .bi { + margin-right: 0.75rem; + font-size: 1.2em; + color: var(--ai-studio-accent-primary); + } + + .info-card { + background: var(--ai-studio-bg-secondary); + border: 1px solid var(--ai-studio-border-color); + border-radius: 12px; /* More rounded */ + transition: all 0.3s ease; /* Enhanced transition */ + display: flex; + flex-direction: column; + height: 100%; + margin-bottom: 1.8rem; /* Increased margin */ + box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* Subtle shadow */ + } + .info-card.highlighted { + border-left: 5px solid var(--ai-studio-accent-primary); + transform: translateY(-3px); + box-shadow: 0 6px 15px rgba(138,180,248,0.2); + } + .info-card:hover { + background-color: var(--ai-studio-bg-tertiary); + transform: translateY(-2px); /* Lift effect */ + box-shadow: 0 4px 12px rgba(0,0,0,0.3); + } + .info-card .card-body { + padding: 1.5rem; /* Increased padding */ + display: flex; + flex-direction: column; + flex-grow: 1; + } + .info-card h5 { + color: var(--ai-studio-text-primary); + font-size: 1.1rem; /* Slightly larger */ + font-weight: 500; + margin-bottom: 0.85rem; + display: flex; + align-items: center; + } + .info-card h5 .bi { + font-size: 1.2em; /* Larger icons */ + margin-right: 0.7rem; + color: var(--ai-studio-icon-color); + transition: color 0.2s ease; + } + .info-card:hover h5 .bi { + color: var(--ai-studio-accent-secondary); + } + .info-card h5 .param-value { + font-size: 0.9rem; + font-weight: 500; /* Bolder */ + color: var(--ai-studio-accent-secondary); + margin-left: auto; + background-color: var(--ai-studio-bg-interactive); /* Darker bg */ + padding: 0.2rem 0.6rem; + border-radius: 6px; /* More rounded */ + } + .info-card p.summary { + font-size: 0.9rem; /* Slightly larger */ + color: var(--ai-studio-text-secondary); + margin-bottom: 1.2rem; /* Increased margin */ + line-height: 1.6; + flex-grow: 1; + } + .info-card .form-control, .info-card .form-select, .info-card .form-range { + background-color: var(--ai-studio-bg-interactive); /* Darker inputs */ + border-color: var(--ai-studio-border-highlight); /* Stronger border */ + color: var(--ai-studio-text-primary); + font-size: 0.9rem; + } + .info-card .form-control::placeholder { + color: var(--ai-studio-text-tertiary); + } + .info-card .form-select { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bdc1c6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); /* Brighter arrow */ + } + .info-card .form-check-input { + background-color: var(--ai-studio-border-color); + border-color: var(--ai-studio-border-highlight); + } + .info-card .form-check-input:checked { + background-color: var(--ai-studio-accent-primary); + border-color: var(--ai-studio-accent-primary); + } + .info-card .form-check-label { + font-size: 0.9rem; + } + + .collapse-content { + font-size: 0.9rem; /* Larger */ + border-top: 1px solid var(--ai-studio-border-highlight); /* Stronger border */ + padding: 1.5rem; /* Increased padding */ + background-color: var(--ai-studio-bg-tertiary); /* Slightly different bg */ + border-radius: 0 0 11px 11px; /* Match card rounding */ + color: var(--ai-studio-text-secondary); + } + .collapse-content h6 { + font-weight: 700; /* Bolder */ + color: var(--ai-studio-accent-secondary); /* Accent color */ + margin-top: 0.5rem; + margin-bottom: 0.6rem; + font-size: 1rem; /* Larger */ + } + .collapse-content ul { + padding-left: 1.3rem; + list-style-type: '✨ '; /* Custom bullet */ + } + .collapse-content li { + margin-bottom: 0.6rem; /* Increased margin */ + line-height: 1.6; + } + .collapse-content li strong { + color: var(--ai-studio-text-primary); + font-weight: 500; + } + .term { + font-weight: 500; + color: var(--ai-studio-accent-primary); /* Accent color */ + background-color: var(--ai-studio-bg-interactive); /* Darker bg */ + padding: 0.15em 0.4em; + border-radius: 5px; + font-size: 0.9em; + } + .docs-link { + font-size: 0.8rem; + color: var(--ai-studio-accent-secondary); + text-decoration: none; + } + .docs-link:hover { + text-decoration: underline; + } + + .details-toggle { + font-size: 0.85rem; /* Slightly larger */ + margin-top: auto; + align-self: flex-start; + padding: 0.4rem 0.8rem; /* Increased padding */ + color: var(--ai-studio-text-secondary); + border: 1px solid var(--ai-studio-border-highlight); /* Stronger border */ + background-color: transparent; + transition: all 0.2s ease; + border-radius: 6px; /* More rounded */ + font-weight: 500; + } + .details-toggle:hover, + .details-toggle:focus { + background-color: var(--ai-studio-bg-interactive); /* Darker hover */ + color: var(--ai-studio-text-primary); + border-color: var(--ai-studio-accent-primary); /* Accent border */ + } + .details-toggle .bi { + transition: transform 0.3s ease-in-out; + } + .details-toggle[aria-expanded="true"] .bi-plus-lg { display: none; } + .details-toggle[aria-expanded="false"] .bi-dash-lg { display: none; } + .details-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); } + + + footer { + padding: 2.5rem 1.5rem; + font-size: 0.85rem; /* Slightly larger */ + color: var(--ai-studio-text-secondary); + text-align: center; + border-top: 1px solid var(--ai-studio-border-highlight); /* Stronger border */ + margin-top: 3rem; /* Increased margin */ + } + footer a { + color: var(--ai-studio-accent-primary); /* Accent color for links */ + font-weight: 500; + text-decoration: none; + } + footer a:hover { + color: var(--ai-studio-accent-secondary); + text-decoration: underline; + } + + .slider-value { + display: inline-block; + padding: 0.25rem 0.6rem; /* Increased padding */ + background-color: var(--ai-studio-bg-interactive); /* Darker bg */ + border: 1px solid var(--ai-studio-border-highlight); /* Stronger border */ + border-radius: 5px; + font-size: 0.85rem; + min-width: 40px; /* Increased width */ + text-align: center; + margin-left: 0.6rem; + color: var(--ai-studio-accent-secondary); /* Accent color */ + font-weight: 500; + } + .form-range::-webkit-slider-thumb { + background: var(--ai-studio-accent-primary); + transform: scale(1.1); /* Larger thumb */ + } + .form-range::-moz-range-thumb { + background: var(--ai-studio-accent-primary); + transform: scale(1.1); + } + .form-range::-ms-thumb { + background: var(--ai-studio-accent-primary); + transform: scale(1.1); + } + .edit-button { + color: var(--ai-studio-accent-primary) !important; + background-color: transparent !important; + border: 1px solid var(--ai-studio-accent-primary) !important; + padding: 0.3rem 0.6rem !important; /* Increased padding */ + font-size: 0.85rem !important; + margin-left: auto; + border-radius: 6px; /* More rounded */ + transition: background-color 0.2s ease; + } + .edit-button:hover { + background-color: rgba(138, 180, 248, 0.15) !important; /* Darker hover */ + } + .source-text { + font-size: 0.8rem; /* Slightly larger */ + color: var(--ai-studio-text-tertiary); + margin-top: 0.3rem; + } + + /* Smart Suggestion Bar */ + .smart-suggestion-bar { + background-color: var(--ai-studio-bg-secondary); + padding: 1.5rem; + border-radius: 12px; + margin-bottom: 2.5rem; + box-shadow: 0 4px 15px rgba(0,0,0,0.2); + } + .smart-suggestion-bar h4 { + color: var(--ai-studio-accent-primary); + margin-bottom: 1rem; + } + + /* Token Count Progress Bar */ + .token-progress-container { + width: 100%; + background-color: var(--ai-studio-bg-interactive); + border-radius: 5px; + height: 10px; /* Thinner bar */ + margin-top: 0.5rem; + overflow: hidden; + } + .token-progress-bar { + height: 100%; + background-color: var(--ai-studio-success-color); + width: 0%; /* Initial width */ + transition: width 0.3s ease, background-color 0.3s ease; + border-radius: 5px; + } + #tokenEstimateInput { margin-top: 0.5rem; } + + /* Interactive Example Placeholder */ + .interactive-example { + border: 1px dashed var(--ai-studio-border-highlight); + padding: 0.8rem; + margin-top: 0.8rem; + border-radius: 6px; + font-style: italic; + color: var(--ai-studio-text-tertiary); + font-size: 0.85rem; + } + .interactive-example strong { + color: var(--ai-studio-text-secondary); + } + + /* Prompt Example Card */ + .prompt-example-card { + background-color: var(--ai-studio-bg-tertiary); + padding: 1.2rem; + border-radius: 8px; + margin-bottom: 1rem; + border-left: 4px solid var(--ai-studio-accent-secondary); + } + .prompt-example-card h6 { + color: var(--ai-studio-accent-primary); + font-weight: 500; + } + .prompt-example-card pre { + background-color: var(--ai-studio-bg-primary); + padding: 0.8rem; + border-radius: 6px; + color: var(--ai-studio-text-secondary); + font-size: 0.85rem; + white-space: pre-wrap; + word-break: break-all; + } + .prompt-example-card .settings-applied { + font-size: 0.8rem; + color: var(--ai-studio-text-tertiary); + } + + /* Modal custom styling */ + .modal-content { + background-color: var(--ai-studio-bg-secondary); + border: 1px solid var(--ai-studio-border-highlight); + } + .modal-header { + border-bottom: 1px solid var(--ai-studio-border-highlight); + } + .modal-header .btn-close { + filter: invert(1) grayscale(100%) brightness(200%); /* Make close button visible on dark bg */ + } + .modal-title { color: var(--ai-studio-accent-primary); } + .modal-body { color: var(--ai-studio-text-secondary); } + .modal-body th, .modal-body td { + color: var(--ai-studio-text-secondary); + border-color: var(--ai-studio-border-highlight) !important; + } + .modal-body th { color: var(--ai-studio-text-primary); } + + + </style> +</head> +<body> + <header class="page-header"> + <div class="d-flex align-items-center"> + <div class="studio-logo-container me-3"> + <i class="bi bi-gem"></i> + </div> + <div class="page-header-text"> + <h1>Google AI Studio</h1> + <p class="lead">Enhanced Settings Cheatsheet</p> + </div> + </div> + <div class="header-actions"> + <button class="btn btn-sm btn-outline-light" id="shareSettingsBtn"><i class="bi bi-share-fill"></i> Share My Settings</button> + </div> + </header> + + <div class="container" id="main-container"> + + <!-- Smart Suggestion Bar --> + <div class="smart-suggestion-bar" id="smart-suggestion-section"> + <h4><i class="bi bi-lightbulb-fill"></i> Smart Settings Suggester</h4> + <p class="text-secondary">Describe your task, and we'll highlight relevant settings to consider!</p> + <div class="input-group"> + <input type="text" class="form-control" id="taskInput" placeholder="e.g., 'write a poem', 'extract JSON data', 'summarize scientific paper'"> + <button class="btn btn-primary" type="button" id="suggestSettingsBtn"><i class="bi bi-magic"></i> Get Suggestions</button> + </div> + </div> + + <!-- I. RUN SETTINGS --> + <div class="section-run-settings"> + <h2 class="section-title" id="section-run-settings-title"><i class="bi bi-sliders"></i>Run Settings</h2> + <div class="row"> + <!-- Model Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card" id="card-model"> + <div class="card-body"> + <h5><i class="bi bi-robot"></i> Model</h5> + <p class="summary">Choose the foundational model for your task. Models vary in capabilities (reasoning, creativity), context window size, speed, and cost.</p> + <select class="form-select mb-2" id="modelSelect" aria-label="Model select"> + <option value="gemini-1.0-pro">Gemini 1.0 Pro (Balanced)</option> + <option value="gemini-2.5-pro-preview" selected>Gemini 2.5 Pro Preview 05-06 (Advanced)</option> + <option value="gemini-1.5-flash">Gemini 1.5 Flash (Fast & Efficient)</option> + <option value="gemini-1.5-pro-experimental">Gemini 1.5 Pro (Experimental)</option> + </select> + <button class="btn btn-sm btn-outline-info mb-3 w-100" data-bs-toggle="modal" data-bs-target="#modelCompareModal"><i class="bi bi-columns-gap"></i> Quick Compare Models</button> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseModel" aria-expanded="false" aria-controls="collapseModel"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + <div class="collapse collapse-content" id="collapseModel"> + <h6>Considerations:</h6> + <ul> + <li><strong>Capability:</strong> Pro versions generally offer superior reasoning and instruction following. "Preview" or "Experimental" models offer the latest features but may change.</li> + <li><strong>Use Cases:</strong> + <ul> + <li><span class="term">Flash</span>: Ideal for high-volume, low-latency tasks (e.g., quick summarization, chat).</li> + <li><span class="term">Pro</span>: Good for complex tasks requiring deep understanding (e.g., detailed analysis, creative content).</li> + </ul> + </li> + <li><strong>Context Window:</strong> The amount of information (text, images, etc.) the model can process. Larger is better for complex prompts or long documents.</li> + <li><strong>Speed & Cost:</strong> Flash models are faster and often cheaper. Pro models are more powerful but may have higher latency/cost.</li> + </ul> + <a href="#" class="docs-link">[Official Model Documentation Link] <i class="bi bi-box-arrow-up-right"></i></a> + </div> + </div> + </div> + <!-- Token Count Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card" id="card-token-count"> + <div class="card-body"> + <h5><i class="bi bi-file-binary"></i> Token count <span class="param-value" id="tokenCountDisplay">0 / 1,048,576</span></h5> + <p class="summary">Tracks tokens used by your input (prompt, files) against the model's limit. 1 token ≈ 4 chars or 0.75 words in English.</p> + <div class="token-progress-container mb-2"> + <div class="token-progress-bar" id="tokenProgressBar"></div> + </div> + <input type="text" class="form-control form-control-sm" id="tokenEstimateInput" placeholder="Paste text here to estimate tokens..."> + <div id="tokenEstimateOutput" class="form-text text-secondary mt-1"></div> + <button class="btn btn-sm details-toggle mt-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTokenCount" aria-expanded="false" aria-controls="collapseTokenCount"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + <div class="collapse collapse-content" id="collapseTokenCount"> + <h6>Understanding Tokens:</h6> + <ul> + <li>Both your input (prompt, files, images) and the model's output consume tokens.</li> + <li>Exceeding limits causes errors or truncated output. Monitor closely, especially with large inputs.</li> + <li>Images also consume tokens, varying by size/complexity.</li> + <li><strong>Pitfall:</strong> Forgetting that system instructions and previous conversation turns also count towards tokens in multi-turn scenarios.</li> + </ul> + <a href="#" class="docs-link">[Official Tokenization Guide Link] <i class="bi bi-box-arrow-up-right"></i></a> + </div> + </div> + </div> + <!-- Temperature Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card" id="card-temperature"> + <div class="card-body"> + <h5><i class="bi bi-thermometer-half"></i> Temperature <span class="slider-value" id="temperatureValue">1.0</span></h5> + <p class="summary">Controls output randomness. Low = focused & deterministic. High = creative & diverse. Affects token probability scaling.</p> + <input type="range" class="form-range" id="temperatureSlider" min="0" max="2" step="0.05" value="1"> + <div class="interactive-example"> + <strong>Effect Visualizer (Conceptual):</strong> + <div id="tempVisualizer" style="width: 100%; height: 20px; background: linear-gradient(to right, var(--ai-studio-success-color) 0%, var(--ai-studio-warning-color) 50%, var(--ai-studio-danger-color) 100%); border-radius: 4px; opacity:0.5;"></div> + <small>Imagine this bar shows likely output: Left (focused), Right (diverse)</small> + </div> + <button class="btn btn-sm details-toggle mt-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTemperature" aria-expanded="false" aria-controls="collapseTemperature"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + <div class="collapse collapse-content" id="collapseTemperature"> + <h6>Typical Ranges & Use Cases:</h6> + <ul> + <li><strong>0.0 - 0.3 (Low):</strong> More factual, predictable. Good for code generation, summarization, Q&A, data extraction. Output is highly consistent.</li> + <li><strong>0.4 - 0.7 (Balanced):</strong> Good for general tasks, creative writing with some constraints.</li> + <li><strong>0.8 - 1.0+ (High, up to 2.0):</strong> Highly creative, diverse, surprising. Good for brainstorming, poetry, novel ideas. Risk of incoherence or topic drift increases.</li> + <li><span class="term">0</span> = greedy decoding (always picks most probable token).</li> + </ul> + <h6>Common Pitfalls:</h6> + <ul> + <li>Setting too high for factual tasks can lead to "hallucinations" (made-up information).</li> + <li>Setting too low for creative tasks can result in repetitive or dull output.</li> + </ul> + <h6>Advanced Tip:</h6> + <p>"Temperature Annealing": Start with a higher temperature for initial creative generation, then reduce it for subsequent refinement passes on the generated text.</p> + <div class="mt-2"> + <input type="text" class="form-control form-control-sm mb-1" placeholder="My use case: e.g., drafting legal text" id="tempExplainInput"> + <button class="btn btn-sm btn-outline-secondary w-100" id="tempExplainBtn">Explain for my use case</button> + <div id="tempExplainOutput" class="form-text text-info mt-1 small"></div> + </div> + <a href="#" class="docs-link mt-2 d-block">[Official Temperature Docs Link] <i class="bi bi-box-arrow-up-right"></i></a> + </div> + </div> + </div> + </div> + </div> + + <!-- II. TOOLS --> + <div class="section-tools"> + <h2 class="section-title" id="section-tools-title"><i class="bi bi-tools"></i>Tools</h2> + <div class="row"> + <!-- Structured Output Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card" id="card-structured-output"> + <div class="card-body"> + <div class="d-flex align-items-center mb-2"> + <h5 class="mb-0"><i class="bi bi-braces-asterisk"></i> Structured output</h5> + <button class="btn btn-sm edit-button ms-auto">Edit Schema</button> + </div> + <div class="form-check form-switch mb-3"> + <input class="form-check-input" type="checkbox" role="switch" id="structuredOutputToggle"> + <label class="form-check-label" for="structuredOutputToggle">Force output into a defined schema (e.g., JSON).</label> + </div> + <p class="summary">Ensures model responses conform to a specific data structure (e.g., JSON schema). Vital for data extraction and system integration.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStructuredOutput" aria-expanded="false" aria-controls="collapseStructuredOutput"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + <div class="collapse collapse-content" id="collapseStructuredOutput"> + <h6>Use Cases:</h6> + <ul> + <li>Extracting entities (names, dates, products) consistently.</li> + <li>Converting natural language to structured API calls.</li> + <li>Generating data for databases or applications. Example schema for a user: <code>{"name": "string", "email": "string"}</code></li> + </ul> + <h6>Common Pitfalls:</h6> + <ul> + <li>Overly complex schemas may be difficult for the model to follow perfectly.</li> + <li>Schema must exactly match the desired output structure.</li> + </ul> + <a href="#" class="docs-link">[Official Structured Output Docs] <i class="bi bi-box-arrow-up-right"></i></a> + </div> + </div> + </div> + <!-- Code Execution Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card" id="card-code-execution"> + <div class="card-body"> + <h5 class="mb-0"><i class="bi bi-play-circle-fill"></i> Code execution</h5> + <div class="form-check form-switch my-2"> + <input class="form-check-input" type="checkbox" role="switch" id="codeExecutionToggle"> + <label class="form-check-label" for="codeExecutionToggle">Allow model to execute code (e.g., Python) for tasks.</label> + </div> + <p class="summary">Enables the model to run code (primarily Python) in a sandboxed environment to perform calculations, data analysis, or simple scripting.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCodeExecution" aria-expanded="false" aria-controls="collapseCodeExecution"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + <div class="collapse collapse-content" id="collapseCodeExecution"> + <h6>Important Notes:</h6> + <ul> + <li>Supports Python in a restricted, sandboxed environment (no network, limited libraries).</li> + <li>Model generates and decides to execute code based on the prompt.</li> + <li><strong>Always review</strong> executed code and outputs for accuracy and safety.</li> + <li>Useful for math, data manipulation, simple algorithms.</li> + </ul> + <a href="#" class="docs-link">[Official Code Execution Docs] <i class="bi bi-box-arrow-up-right"></i></a> + </div> + </div> + </div> + <!-- Function Calling Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card" id="card-function-calling"> + <div class="card-body"> + <div class="d-flex align-items-center mb-2"> + <h5 class="mb-0"><i class="bi bi-lightning-charge-fill"></i> Function calling</h5> + <button class="btn btn-sm edit-button ms-auto">Define Functions</button> + </div> + <div class="form-check form-switch mb-3"> + <input class="form-check-input" type="checkbox" role="switch" id="functionCallingToggle"> + <label class="form-check-label" for="functionCallingToggle">Allow model to call your predefined functions/tools.</label> + </div> + <p class="summary">Define custom functions (tools) that the model can invoke to interact with external APIs, fetch real-time data, or perform specialized actions.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFunctionCalling" aria-expanded="false" aria-controls="collapseFunctionCalling"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + <div class="collapse collapse-content" id="collapseFunctionCalling"> + <h6>How it Works:</h6> + <ul> + <li>Provide function declarations (name, description, parameters with types).</li> + <li>Model returns JSON with function name & arguments if it decides to call one.</li> + <li>Your application executes the function and returns the result to the model.</li> + <li><strong>Advanced Tip:</strong> Design function descriptions clearly and make functions idempotent where possible.</li> + </ul> + <a href="#" class="docs-link">[Official Function Calling Docs] <i class="bi bi-box-arrow-up-right"></i></a> + </div> + </div> + </div> + <!-- Grounding with Google Search Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card" id="card-grounding-search"> + <div class="card-body"> + <h5 class="mb-0"><i class="bi bi-google"></i> Grounding <small>(via Google Search)</small></h5> + <div class="form-check form-switch my-2"> + <input class="form-check-input" type="checkbox" role="switch" id="groundingSearchToggle" checked> + <label class="form-check-label" for="groundingSearchToggle">Allow model to use Google Search for current info.</label> + </div> + <p class="source-text mb-2">Source: <i class="bi bi-google"></i> Google Search</p> + <p class="summary">Enhances responses by fetching and incorporating information from Google Search, providing more current and factual answers.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGroundingSearch" aria-expanded="false" aria-controls="collapseGroundingSearch"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + <div class="collapse collapse-content" id="collapseGroundingSearch"> + <h6>Benefits:</h6> + <ul> + <li>Access to recent events and information beyond model's training data.</li> + <li>Improved factuality and reduced hallucination for topics needing current knowledge.</li> + <li>Citations may be provided, indicating search result sources.</li> + </ul> + <a href="#" class="docs-link">[Official Grounding Docs] <i class="bi bi-box-arrow-up-right"></i></a> + </div> + </div> + </div> + <!-- URL Context Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card" id="card-url-context"> + <div class="card-body"> + <h5 class="mb-0"><i class="bi bi-link-45deg"></i> URL context</h5> + <div class="form-check form-switch my-2"> + <input class="form-check-input" type="checkbox" role="switch" id="urlContextToggle" checked> + <label class="form-check-label" for="urlContextToggle">Allow model to use content from provided URLs.</label> + </div> + <p class="summary">Provide URLs in prompt; model attempts to fetch and use their content. Useful for summarizing articles or web-based Q&A.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseUrlContext" aria-expanded="false" aria-controls="collapseUrlContext"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + <div class="collapse collapse-content" id="collapseUrlContext"> + <h6>Use Cases & Limitations:</h6> + <ul> + <li>Summarize news articles or documentation pages.</li> + <li>Answer questions based on specific web content.</li> + <li>Up to 20 URLs (experimental, verify current limit).</li> + <li><strong>Pitfalls:</strong> May fail on paywalled sites, complex JS-rendered pages, or very large content.</li> + </ul> + <a href="#" class="docs-link">[Official URL Context Docs] <i class="bi bi-box-arrow-up-right"></i></a> + </div> + </div> + </div> + </div> + </div> + + <!-- III. ADVANCED SETTINGS --> + <div class="section-advanced-settings"> + <h2 class="section-title" id="section-advanced-settings-title"><i class="bi bi-gear-wide-connected"></i>Advanced Settings</h2> + <div class="row"> + <!-- Top P Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card" id="card-top-p"> + <div class="card-body"> + <h5><i class="bi bi-filter-circle-fill"></i> Top P <span class="slider-value" id="topPValue">0.95</span></h5> + <p class="summary">Nucleus sampling: Considers tokens with cumulative probability > P. Lower P = focused, higher P = random. Alternative to Temperature.</p> + <input type="range" class="form-range" id="topPSlider" min="0" max="1" step="0.01" value="0.95"> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTopP" aria-expanded="false" aria-controls="collapseTopP"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + <div class="collapse collapse-content" id="collapseTopP"> + <h6>Understanding Top P:</h6> + <ul> + <li><span class="term">1.0</span>: All tokens considered (effectively disabled).</li> + <li><span class="term">0.1</span>: Only tokens in top 10% probability mass are chosen from.</li> + <li>Lowering Top P reduces diversity, can improve coherence. Often used with a fixed, moderate Temperature.</li> + <li>If both Temp & Top P are set, Top P is usually applied first.</li> + </ul> + <a href="#" class="docs-link">[Official Top P Docs] <i class="bi bi-box-arrow-up-right"></i></a> + </div> + </div> + </div> + <!-- Top K Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card" id="card-top-k"> + <div class="card-body"> + <h5><i class="bi bi-list-ol"></i> Top K <span class="slider-value" id="topKValue">40</span></h5> + <p class="summary">(Model-dependent) Considers only K most probable tokens. Lower K = focused, higher K = random. Less common than Top P.</p> + <input type="range" class="form-range" id="topKSlider" min="0" max="100" step="1" value="40" disabled> <!-- Disabled by default, as it's less common --> + <small class="text-tertiary d-block mb-2">Note: Top K availability and behavior can vary by model.</small> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTopK" aria-expanded="false" aria-controls="collapseTopK"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + <div class="collapse collapse-content" id="collapseTopK"> + <h6>Understanding Top K:</h6> + <ul> + <li><span class="term">1</span>: Greedy decoding (same as Temp 0).</li> + <li><span class="term">0</span>: Disables Top K (or not supported by model).</li> + <li>Reduces chance of picking unlikely tokens, can improve coherence.</li> + <li>Using Temp, Top P, and Top K aggressively together can over-constrain output. Often, one or two are primary.</li> + </ul> + <a href="#" class="docs-link">[General LLM Top K Info] <i class="bi bi-box-arrow-up-right"></i></a> + </div> + </div> + </div> + <!-- Safety Settings Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card" id="card-safety-settings"> + <div class="card-body"> + <div class="d-flex align-items-center mb-2"> + <h5 class="mb-0"><i class="bi bi-shield-fill-check"></i> Safety settings</h5> + <button class="btn btn-sm edit-button ms-auto">Edit Thresholds</button> + </div> + <p class="summary">Configure blocking thresholds for Harassment, Hate speech, Sexually explicit, and Dangerous content. Adjust sensitivity per category.</p> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSafetySettings" aria-expanded="false" aria-controls="collapseSafetySettings"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + <div class="collapse collapse-content" id="collapseSafetySettings"> + <h6>Threshold Options:</h6> + <ul> + <li><strong>Block most:</strong> Highest sensitivity, blocks more potentially harmful content.</li> + <li><strong>Block some:</strong> Balanced approach (often default).</li> + <li><strong>Block few:</strong> Lowest sensitivity, allows more but may include harmful responses.</li> + <li><strong>Block none:</strong> (Availability varies) Disables blocking for the category.</li> + <li><strong>Important:</strong> Carefully consider implications. Even with "Block none," API usage policies apply.</li> + </ul> + <a href="#" class="docs-link">[Official Safety Settings Docs] <i class="bi bi-box-arrow-up-right"></i></a> + </div> + </div> + </div> + <!-- Stop Sequences Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card" id="card-stop-sequences"> + <div class="card-body"> + <h5><i class="bi bi-stop-circle-fill"></i> Add stop sequence</h5> + <p class="summary">Specify up to 5 character sequences. If generated, model stops output. Not included in response.</p> + <input type="text" class="form-control mb-3" id="stopSequenceInput" placeholder="Add stop... (e.g., '###', '\n\nUser:')"> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseStopSequences" aria-expanded="false" aria-controls="collapseStopSequences"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + <div class="collapse collapse-content" id="collapseStopSequences"> + <h6>Usage & Pitfalls:</h6> + <ul> + <li>Controls output length/format (e.g., stop at "END_OF_RESPONSE").</li> + <li>Sequences are case-sensitive. + <li><strong>Pitfall:</strong> Choosing a sequence that might naturally appear in desired output, causing premature truncation.</li> + </ul> + <a href="#" class="docs-link">[Official Stop Sequences Docs] <i class="bi bi-box-arrow-up-right"></i></a> + </div> + </div> + </div> + <!-- Output Length Card --> + <div class="col-lg-4 col-md-6"> + <div class="info-card" id="card-output-length"> + <div class="card-body"> + <h5><i class="bi bi-rulers"></i> Output length <span class="param-value" id="outputLengthValue">8192</span></h5> <!-- Default from common models --> + <p class="summary">Max tokens model can generate in response (not including prompt tokens). Actual output can be shorter.</p> + <input type="number" class="form-control mb-3" id="outputLengthInput" value="8192" min="1" max="1048576"> <!-- Max from image --> + <button class="btn btn-sm details-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOutputLength" aria-expanded="false" aria-controls="collapseOutputLength"> + Details <i class="bi bi-chevron-down"></i> + </button> + </div> + <div class="collapse collapse-content" id="collapseOutputLength"> + <h6>Considerations:</h6> + <ul> + <li>Model may finish or hit stop sequence before max length.</li> + <li>Too low truncates responses; too high increases time/cost.</li> + <li>Max value depends on selected model. Current is 1,048,576 for some models (like shown in UI image's token count). The "8192" is often a default output length for some APIs.</li> + </ul> + <a href="#" class="docs-link">[Official Output Length Docs] <i class="bi bi-box-arrow-up-right"></i></a> + </div> + </div> + </div> + </div> + </div> + + <!-- IV. INTERPLAY OF SETTINGS --> + <div class="section-interplay"> + <h2 class="section-title" id="section-interplay-title"><i class="bi bi-intersect"></i>Interplay of Settings</h2> + <div class="info-card"> + <div class="card-body"> + <p class="summary">Temperature, Top P, and Top K all control output randomness by influencing next-token selection. Understanding their interaction is key for fine-tuning.</p> + <h6>Temperature vs. Top P:</h6> + <ul> + <li><strong>Temperature:</strong> Rescales probabilities of all potential next tokens. High temp flattens distribution (more randomness); low temp sharpens it (less randomness).</li> + <li><strong>Top P (Nucleus Sampling):</strong> Selects the smallest set of tokens whose cumulative probability is >= P. Ignores tokens outside this "nucleus." More adaptive than Top K.</li> + <li><strong>Common Strategy:</strong> Many users pick one primary method. E.g., set Top P to a high default (0.9-0.95) and adjust Temperature. Or, set Temperature moderately (0.7-0.9) and tune Top P. Setting Temperature to 0 effectively makes Top P/K irrelevant (always picks the single most likely token).</li> + </ul> + <h6>Top K vs. Top P:</h6> + <ul> + <li><strong>Top K:</strong> Selects from a fixed number (K) of the most probable next tokens. Simpler but less adaptive than Top P.</li> + <li>If the probability distribution is very flat (many tokens have similar probabilities), Top K might include low-probability tokens if K is large. If it's very steep, Top K might be very restrictive if K is small. Top P adapts to the shape of this distribution.</li> + </ul> + <h6>Example Scenarios:</h6> + <ul> + <li><strong>Factual Q&A:</strong> Temp=0.2, Top P=1.0 (or not set). Result: Focused, deterministic.</li> + <li><strong>Creative Brainstorming:</strong> Temp=0.9, Top P=0.95. Result: Diverse, novel ideas.</li> + <li><strong>Over-Constrained (Avoid):</strong> Temp=0.1, Top P=0.1, Top K=1. Result: Very limited, repetitive, likely poor quality.</li> + </ul> + </div> + </div> + </div> + + <!-- V. CURATED PROMPT EXAMPLES --> + <div class="section-prompt-examples"> + <h2 class="section-title" id="section-prompt-examples-title"><i class="bi bi-file-earmark-text-fill"></i>Curated Prompt Examples</h2> + <div class="row"> + <div class="col-md-6"> + <div class="prompt-example-card"> + <h6>Task: Creative Story Snippet</h6> + <pre>Base Prompt: "Write a short, mysterious opening for a story set in an old library."</pre> + <hr> + <p class="settings-applied">Variation 1 (Focused): Temp=0.3, Top P=0.9</p> + <pre class="output-example">"The dust motes danced in the single shaft of moonlight that pierced the gloom of the Grand Library. A tome, bound in cracked leather, lay open on a pedestal, its pages whispering secrets only the silence understood."</pre> + <hr> + <p class="settings-applied">Variation 2 (Imaginative): Temp=0.9, Top P=0.95</p> + <pre class="output-example">"Old Man Hemlock swore the library breathed. Tonight, as a rogue constellation winked through the grimy oriel window, the very ink in the forgotten grimoires seemed to squirm, yearning for a reader brave, or foolish, enough to translate their sighing script."</pre> + </div> + </div> + <div class="col-md-6"> + <div class="prompt-example-card"> + <h6>Task: JSON Data Extraction</h6> + <pre>Base Prompt: "Extract the name and email from this text: 'Contact Jane Doe at [email protected] for more info.' Your output must be a JSON object."</pre> + <hr> + <p class="settings-applied">Settings: Temp=0.1, Structured Output (Schema: {"name": "string", "email": "string"})</p> + <pre class="output-example">{ + "name": "Jane Doe", + "email": "[email protected]" +}</pre> + <p class="mt-2"><small>Note: Forcing JSON via prompt instruction is good, but using the 'Structured Output' tool with a schema is more reliable.</small></p> + </div> + </div> + </div> + </div> + + </div> <!-- End main container --> + + <!-- Model Comparison Modal --> + <div class="modal fade" id="modelCompareModal" tabindex="-1" aria-labelledby="modelCompareModalLabel" aria-hidden="true"> + <div class="modal-dialog modal-lg modal-dialog-centered"> + <div class="modal-content"> + <div class="modal-header"> + <h5 class="modal-title" id="modelCompareModalLabel"><i class="bi bi-columns-gap"></i> Model Quick Comparison</h5> + <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> + </div> + <div class="modal-body"> + <p class="text-secondary small">This is an illustrative comparison. Always refer to official documentation for the latest details.</p> + <table class="table table-hover table-sm"> + <thead> + <tr> + <th>Feature</th> + <th>Gemini 1.5 Flash</th> + <th>Gemini 1.0 Pro</th> + <th>Gemini 2.5 Pro Preview</th> + </tr> + </thead> + <tbody> + <tr> + <td><strong>Primary Use Case</strong></td> + <td>High speed, efficiency, high volume tasks</td> + <td>Balanced performance and capability</td> + <td>Advanced reasoning, complex tasks, latest features</td> + </tr> + <tr> + <td><strong>Context Window</strong></td> + <td>Large (e.g., 1M tokens)</td> + <td>Standard (e.g., 32k tokens)</td> + <td>Very Large (e.g., 1M+ tokens, up to 2M in image)</td> + </tr> + <tr> + <td><strong>Speed</strong></td> + <td>Fastest</td> + <td>Moderate</td> + <td>Moderate to Fast (for its power)</td> + </tr> + <tr> + <td><strong>Cost Indication</strong></td> + <td>Lower</td> + <td>Medium</td> + <td>Higher (Preview pricing may apply)</td> + </tr> + <tr> + <td><strong>Strengths</strong></td> + <td>Chat, summarization, RAG at scale</td> + <td>General purpose, content generation, instruction following</td> + <td>Complex problem solving, multi-modal understanding, code gen</td> + </tr> + </tbody> + </table> + </div> + </div> + </div> + </div> + + + <footer class="container text-center"> + <div> + Enhanced Google AI Studio Cheatsheet. Inspired by AI Studio. For informational & educational purposes. + </div> + <div> + <a href="https://aistudio.google.com/" target="_blank" rel="noopener noreferrer"><i class="bi bi-google"></i> Official Google AI Studio</a> | + <a href="mailto:[email protected]?subject=AI Studio Cheatsheet Feedback"><i class="bi bi-envelope-fill"></i> Suggest an Edit / Feedback</a> + </div> + <div class="mt-2 text-tertiary" id="lastUpdated"> + Last updated: May 21, 2025 + </div> + </footer> + + <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> + <script> + document.addEventListener("DOMContentLoaded", () => { + // --- Global Variables & Selectors --- + const slidersConfig = [ + { id: 'temperatureSlider', valueId: 'temperatureValue', fixed: 2, visualizerId: 'tempVisualizer' }, // Changed fixed to 2 + { id: 'topPSlider', valueId: 'topPValue', fixed: 2 }, + { id: 'topKSlider', valueId: 'topKValue', fixed: 0 } + ]; + const outputLengthInput = document.getElementById('outputLengthInput'); + const outputLengthValue = document.getElementById('outputLengthValue'); + const tokenEstimateInput = document.getElementById('tokenEstimateInput'); + const tokenEstimateOutput = document.getElementById('tokenEstimateOutput'); + const tokenProgressBar = document.getElementById('tokenProgressBar'); + const tokenCountDisplay = document.getElementById('tokenCountDisplay'); + const modelSelect = document.getElementById('modelSelect'); + + // --- Initialize UI Elements & Event Listeners --- + + // Initialize and handle sliders + slidersConfig.forEach(config => { + const slider = document.getElementById(config.id); + const valueDisplay = document.getElementById(config.valueId); + if (slider && valueDisplay) { + const updateFn = () => { + const val = parseFloat(slider.value); + valueDisplay.textContent = val.toFixed(config.fixed); + if (config.visualizerId) { + const visualizer = document.getElementById(config.visualizerId); + if (visualizer) { // Example: Temperature visualizer update + // Simple opacity change, could be more complex + visualizer.style.opacity = 0.3 + (val / parseFloat(slider.max)) * 0.7; + } + } + }; + slider.addEventListener('input', updateFn); + updateFn(); // Initialize display + } + }); + + // Output Length Input + if (outputLengthInput && outputLengthValue) { + const updateOutputLength = () => outputLengthValue.textContent = outputLengthInput.value; + outputLengthInput.addEventListener('input', updateOutputLength); + updateOutputLength(); // Initialize + } + + // Details toggle button icon and ARIA state update + document.querySelectorAll(".details-toggle").forEach(button => { + const targetId = button.getAttribute("data-bs-target"); + if (!targetId) return; + const collapseEl = document.querySelector(targetId); + if (!collapseEl) return; + + // Use bi-chevron-down and rotate + const icon = button.querySelector(".bi-chevron-down") || document.createElement('i'); + if(!button.querySelector(".bi-chevron-down")) { // Add if not present + icon.classList.add('bi', 'bi-chevron-down', 'ms-1'); + button.appendChild(icon); + } + + const updateButton = (isShown) => { + button.setAttribute("aria-expanded", isShown.toString()); + icon.style.transform = isShown ? 'rotate(180deg)' : 'rotate(0deg)'; + }; + + updateButton(collapseEl.classList.contains("show")); // Initial state + collapseEl.addEventListener('show.bs.collapse', () => updateButton(true)); + collapseEl.addEventListener('hide.bs.collapse', () => updateButton(false)); + }); + + // Token Estimator & Progress Bar + let maxTokens = 1048576; // Default, can be updated by model select if needed + + if (modelSelect) { // Update maxTokens based on model (conceptual) + const updateMaxTokensForModel = () => { + const selectedModel = modelSelect.value; + // This is a simplified mapping; actual limits vary and are complex + if (selectedModel.includes("2.5-pro") || selectedModel.includes("1.5-pro")) { + maxTokens = 1048576 * 2; // From UI image, token limit of model is 2M + } else if (selectedModel.includes("flash")) { + maxTokens = 1048576; + } else { + maxTokens = 32768; // Older Gemini 1.0 Pro + } + tokenCountDisplay.textContent = `${currentTokens} / ${maxTokens.toLocaleString()}`; + updateTokenProgress(); + }; + modelSelect.addEventListener('change', updateMaxTokensForModel); + // updateMaxTokensForModel(); // Call once on load + } + + let currentTokens = 0; // Placeholder, in a real app this updates from editor + // Initialize tokenCountDisplay with a placeholder from the image + const initialTokenCountFromImage = 9486; // from the image + const initialMaxTokenFromImage = 1048576; // from the image + currentTokens = initialTokenCountFromImage; + maxTokens = initialMaxTokenFromImage; + tokenCountDisplay.textContent = `${currentTokens.toLocaleString()} / ${maxTokens.toLocaleString()}`; + + + function updateTokenProgress() { + const percentage = maxTokens > 0 ? (currentTokens / maxTokens) * 100 : 0; + if (tokenProgressBar) { + tokenProgressBar.style.width = `${Math.min(percentage, 100)}%`; + if (percentage > 90) tokenProgressBar.style.backgroundColor = 'var(--ai-studio-danger-color)'; + else if (percentage > 70) tokenProgressBar.style.backgroundColor = 'var(--ai-studio-warning-color)'; + else tokenProgressBar.style.backgroundColor = 'var(--ai-studio-success-color)'; + } + } + updateTokenProgress(); // Initial call + + if (tokenEstimateInput && tokenEstimateOutput) { + tokenEstimateInput.addEventListener('input', () => { + const text = tokenEstimateInput.value; + const estimate = Math.ceil(text.length / 3.5); // Rough estimate + tokenEstimateOutput.textContent = `Estimated tokens for this text: ~${estimate}`; + currentTokens = estimate; // Update global currentTokens for demo + tokenCountDisplay.textContent = `${currentTokens.toLocaleString()} / ${maxTokens.toLocaleString()}`; + updateTokenProgress(); + }); + } + + + // Smart Settings Suggester + const taskInput = document.getElementById('taskInput'); + const suggestSettingsBtn = document.getElementById('suggestSettingsBtn'); + if (taskInput && suggestSettingsBtn) { + suggestSettingsBtn.addEventListener('click', () => { + const task = taskInput.value.toLowerCase(); + document.querySelectorAll('.info-card.highlighted').forEach(c => c.classList.remove('highlighted')); + + if (task.includes('poem') || task.includes('story') || task.includes('creative')) { + document.getElementById('card-temperature')?.classList.add('highlighted'); + document.getElementById('card-top-p')?.classList.add('highlighted'); + } + if (task.includes('json') || task.includes('extract data')) { + document.getElementById('card-structured-output')?.classList.add('highlighted'); + document.getElementById('card-temperature')?.classList.add('highlighted'); // Low temp for extraction + } + if (task.includes('code') || task.includes('script') || task.includes('python')) { + document.getElementById('card-code-execution')?.classList.add('highlighted'); + } + if (task.includes('summarize') || task.includes('explain')) { + document.getElementById('card-temperature')?.classList.add('highlighted'); + document.getElementById('card-output-length')?.classList.add('highlighted'); + } + if (task.includes('current events') || task.includes('latest news')) { + document.getElementById('card-grounding-search')?.classList.add('highlighted'); + } + // Scroll to first highlighted card if any + const firstHighlighted = document.querySelector('.info-card.highlighted'); + if (firstHighlighted) { + firstHighlighted.scrollIntoView({ behavior: 'smooth', block: 'center' }); + } + }); + } + + // Parameter Explainer (Conceptual for Temperature) + const tempExplainInput = document.getElementById('tempExplainInput'); + const tempExplainBtn = document.getElementById('tempExplainBtn'); + const tempExplainOutput = document.getElementById('tempExplainOutput'); + if (tempExplainInput && tempExplainBtn && tempExplainOutput) { + tempExplainBtn.addEventListener('click', () => { + const useCase = tempExplainInput.value; + if (useCase.trim() === '') { + tempExplainOutput.textContent = "Please enter a use case."; + return; + } + // In a real app, this would call an LLM. + tempExplainOutput.textContent = `For '${useCase}', a moderate Temperature (0.5-0.7) is often good for balanced results. If it's highly factual, try 0.2. If very creative, try 0.9. (This is a simulated LLM explanation).`; + }); + } + + // Share My Settings + const shareSettingsBtn = document.getElementById('shareSettingsBtn'); + if (shareSettingsBtn) { + shareSettingsBtn.addEventListener('click', () => { + const settings = { + model: modelSelect ? modelSelect.value : '', + temp: document.getElementById('temperatureSlider')?.value, + topP: document.getElementById('topPSlider')?.value, + topK: document.getElementById('topKSlider')?.value, + outputLen: outputLengthInput?.value, + structOut: document.getElementById('structuredOutputToggle')?.checked, + codeExec: document.getElementById('codeExecutionToggle')?.checked, + funcCall: document.getElementById('functionCallingToggle')?.checked, + grounding: document.getElementById('groundingSearchToggle')?.checked, + urlCtx: document.getElementById('urlContextToggle')?.checked, + stopSeq: document.getElementById('stopSequenceInput')?.value + }; + const params = new URLSearchParams(); + for (const key in settings) { + if (settings[key] !== undefined && settings[key] !== '' && settings[key] !== null) { + params.set(key, settings[key]); + } + } + const shareUrl = `${window.location.pathname}#${params.toString()}`; + navigator.clipboard.writeText(shareUrl).then(() => { + alert('Settings URL copied to clipboard!'); + }).catch(err => { + alert('Could not copy URL. Manual copy: ' + shareUrl); + }); + }); + } + + // Load settings from URL hash on page load + function loadSettingsFromHash() { + if (window.location.hash) { + const params = new URLSearchParams(window.location.hash.substring(1)); + + const model = params.get('model'); + if (modelSelect && model) modelSelect.value = model; + + const temp = params.get('temp'); + const tempSlider = document.getElementById('temperatureSlider'); + if (tempSlider && temp) { tempSlider.value = temp; tempSlider.dispatchEvent(new Event('input'));} + + const topP = params.get('topP'); + const topPSlider = document.getElementById('topPSlider'); + if (topPSlider && topP) { topPSlider.value = topP; topPSlider.dispatchEvent(new Event('input'));} + + const topK = params.get('topK'); + const topKSlider = document.getElementById('topKSlider'); + if (topKSlider && topK) { topKSlider.value = topK; topKSlider.dispatchEvent(new Event('input'));} + + const outputLen = params.get('outputLen'); + if (outputLengthInput && outputLen) { outputLengthInput.value = outputLen; outputLengthInput.dispatchEvent(new Event('input'));} + + const structOut = params.get('structOut'); + const structOutToggle = document.getElementById('structuredOutputToggle'); + if (structOutToggle && structOut) structOutToggle.checked = (structOut === 'true'); + + const codeExec = params.get('codeExec'); + const codeExecToggle = document.getElementById('codeExecutionToggle'); + if (codeExecToggle && codeExec) codeExecToggle.checked = (codeExec === 'true'); + + const funcCall = params.get('funcCall'); + const funcCallToggle = document.getElementById('functionCallingToggle'); + if (funcCallToggle && funcCall) funcCallToggle.checked = (funcCall === 'true'); + + const grounding = params.get('grounding'); + const groundingToggle = document.getElementById('groundingSearchToggle'); + if (groundingToggle && grounding) groundingToggle.checked = (grounding === 'true'); + + const urlCtx = params.get('urlCtx'); + const urlCtxToggle = document.getElementById('urlContextToggle'); + if (urlCtxToggle && urlCtx) urlCtxToggle.checked = (urlCtx === 'true'); + + const stopSeq = params.get('stopSeq'); + const stopSeqInput = document.getElementById('stopSequenceInput'); + if (stopSeqInput && stopSeq) stopSeqInput.value = stopSeq; + + // Update max tokens based on loaded model + if (modelSelect) modelSelect.dispatchEvent(new Event('change')); + alert('Settings loaded from URL!'); + } + } + loadSettingsFromHash(); + + // Update last updated date (simple example) + const lastUpdatedEl = document.getElementById('lastUpdated'); + if(lastUpdatedEl) { + const today = new Date(); + // Format date as Month Day, Year + const options = { year: 'numeric', month: 'long', day: 'numeric' }; + lastUpdatedEl.textContent = `Last updated: ${today.toLocaleDateString('en-US', options)}`; + } + + }); + </script> +</body> +</html> \ No newline at end of file