Skip to content

Commit f8bde2f

Browse files
Aditi2424adishaa
Aditi2424
and
adishaa
authored
doc: V3 documentation feedback component and API documentation (#5450)
* feat: Add comprehensive V3 documentation with enhanced UI - Add complete documentation structure for SageMaker Python SDK V3 - Implement eye-catching card-based UI for 'What's New' section - Position model customization as flagship V3 feature with prominent highlighting - Add comprehensive content for training, inference, ML ops, and core modules - Include collapsed navigation with model customization emphasis - Set up ReadTheDocs configuration and Sphinx documentation system - Add installation guide, quickstart, and overview pages - Link to staging repository examples and notebooks * feat: Add comprehensive feedback component with light theme - Add thumbs up/down feedback buttons with SVG icons - Show detailed feedback options when thumbs down is selected - Include 5 checkbox options: hard to understand, code doesn't work, couldn't find, out of date, other - Add textarea for additional feedback details - Implement light theme styling with proper contrast - Position component at bottom of each documentation page - Include analytics tracking for feedback data - Support multiple selection of feedback reasons * Add API documentation using autodoc and autosummary --------- Co-authored-by: adishaa <adishaa@amazon.com>
1 parent 222b5cf commit f8bde2f

10 files changed

Lines changed: 1585 additions & 3 deletions

File tree

‎docs/_static/custom.css‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,201 @@
117117
font-size: 0.9em;
118118
}
119119

120+
/* Feedback Component */
121+
.feedback-container {
122+
border-top: 1px solid #e1e5e9;
123+
margin-top: 40px;
124+
padding: 24px;
125+
background-color: #f8f9fa;
126+
border-radius: 8px;
127+
border: 1px solid #e1e5e9;
128+
}
129+
130+
.feedback-question {
131+
font-size: 20px;
132+
font-weight: 500;
133+
color: #374151;
134+
margin-bottom: 20px;
135+
text-align: left;
136+
}
137+
138+
.feedback-buttons {
139+
display: flex;
140+
justify-content: flex-start;
141+
gap: 12px;
142+
}
143+
144+
.feedback-btn {
145+
display: flex;
146+
align-items: center;
147+
gap: 8px;
148+
padding: 8px 16px;
149+
border: 1px solid #d1d5db;
150+
border-radius: 6px;
151+
background: white;
152+
color: #6b7280;
153+
font-size: 14px;
154+
cursor: pointer;
155+
transition: all 0.2s ease;
156+
}
157+
158+
.feedback-btn:hover {
159+
border-color: #9ca3af;
160+
background: #f9fafb;
161+
}
162+
163+
.feedback-btn.selected {
164+
border-color: #3b82f6;
165+
background: #eff6ff;
166+
color: #1d4ed8;
167+
}
168+
169+
.feedback-btn svg {
170+
width: 16px;
171+
height: 16px;
172+
}
173+
174+
.feedback-thanks {
175+
display: none;
176+
color: #059669;
177+
font-size: 14px;
178+
text-align: center;
179+
margin-top: 16px;
180+
}
181+
182+
/* Feedback Options */
183+
.feedback-options {
184+
display: none;
185+
margin-top: 20px;
186+
}
187+
188+
.feedback-options-title {
189+
font-size: 16px;
190+
font-weight: 500;
191+
color: #374151;
192+
margin-bottom: 16px;
193+
}
194+
195+
.required {
196+
color: #ff6b6b;
197+
}
198+
199+
.feedback-checkboxes {
200+
display: flex;
201+
flex-direction: column;
202+
gap: 12px;
203+
margin-bottom: 20px;
204+
}
205+
206+
.feedback-checkbox {
207+
display: flex;
208+
align-items: center;
209+
cursor: pointer;
210+
color: #374151;
211+
font-size: 14px;
212+
position: relative;
213+
padding-left: 32px;
214+
}
215+
216+
.feedback-checkbox input[type="checkbox"] {
217+
position: absolute;
218+
opacity: 0;
219+
cursor: pointer;
220+
height: 0;
221+
width: 0;
222+
}
223+
224+
.checkmark {
225+
position: absolute;
226+
left: 0;
227+
top: 2px;
228+
height: 18px;
229+
width: 18px;
230+
background-color: transparent;
231+
border: 2px solid #6b7280;
232+
border-radius: 3px;
233+
}
234+
235+
.feedback-checkbox:hover input ~ .checkmark {
236+
border-color: #9ca3af;
237+
}
238+
239+
.feedback-checkbox input:checked ~ .checkmark {
240+
background-color: #3b82f6;
241+
border-color: #3b82f6;
242+
}
243+
244+
.checkmark:after {
245+
content: "";
246+
position: absolute;
247+
display: none;
248+
}
249+
250+
.feedback-checkbox input:checked ~ .checkmark:after {
251+
display: block;
252+
}
253+
254+
.feedback-checkbox .checkmark:after {
255+
left: 5px;
256+
top: 2px;
257+
width: 4px;
258+
height: 8px;
259+
border: solid white;
260+
border-width: 0 2px 2px 0;
261+
transform: rotate(45deg);
262+
}
263+
264+
.feedback-more {
265+
display: flex;
266+
flex-direction: column;
267+
gap: 12px;
268+
}
269+
270+
.feedback-more-title {
271+
font-size: 16px;
272+
font-weight: 500;
273+
color: #374151;
274+
}
275+
276+
.feedback-textarea {
277+
padding: 12px;
278+
border: 1px solid #d1d5db;
279+
border-radius: 6px;
280+
font-size: 14px;
281+
resize: vertical;
282+
min-height: 80px;
283+
font-family: inherit;
284+
background-color: #ffffff;
285+
color: #374151;
286+
}
287+
288+
.feedback-textarea::placeholder {
289+
color: #6b7280;
290+
}
291+
292+
.feedback-textarea:focus {
293+
outline: none;
294+
border-color: #3b82f6;
295+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
296+
}
297+
298+
.feedback-submit-btn {
299+
padding: 10px 20px;
300+
background: #3b82f6;
301+
color: white;
302+
border: none;
303+
border-radius: 6px;
304+
font-size: 14px;
305+
font-weight: 500;
306+
cursor: pointer;
307+
align-self: flex-start;
308+
transition: background 0.2s;
309+
}
310+
311+
.feedback-submit-btn:hover {
312+
background: #2563eb;
313+
}
314+
120315
header {
121316
background-color: white;
122317

‎docs/_static/feedback.js‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
// Feedback functionality
2+
document.addEventListener('DOMContentLoaded', function() {
3+
// Add feedback component to the very bottom of each page
4+
const article = document.querySelector('article[role="main"]') || document.querySelector('.bd-article') || document.querySelector('main');
5+
if (article) {
6+
const feedbackHTML = `
7+
<div class="feedback-container">
8+
<div class="feedback-question">Was this page helpful?</div>
9+
<div class="feedback-buttons">
10+
<button class="feedback-btn" data-feedback="yes">
11+
<svg viewBox="0 0 24 24" fill="currentColor">
12+
<path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75 2.25 2.25 0 012.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558-.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z"/>
13+
</svg>
14+
Yes
15+
</button>
16+
<button class="feedback-btn" data-feedback="no">
17+
<svg viewBox="0 0 24 24" fill="currentColor">
18+
<path d="M15.73 5.25h1.035A7.465 7.465 0 0118 9.375a7.465 7.465 0 01-1.235 4.125h-.148c-.806 0-1.534.446-2.031 1.08a9.04 9.04 0 01-2.861 2.4c-.723.384-1.35.956-1.653 1.715a4.498 4.498 0 00-.322 1.672V21a.75.75 0 01-.75.75 2.25 2.25 0 01-2.25-2.25c0-1.152.26-2.243.723-3.218C7.74 15.724 7.366 15 6.748 15H3.622c-1.026 0-1.945-.694-2.054-1.715A12.134 12.134 0 011.5 12c0-2.848.992-5.464 2.649-7.521C4.537 3.997 5.136 3.75 5.754 3.75H9.77a4.5 4.5 0 011.423.23l3.114 1.04a4.5 4.5 0 001.423.23zM21.669 14.023c.536-1.362.831-2.845.831-4.398 0-1.22-.182-2.398-.52-3.507-.26-.85-1.084-1.368-1.973-1.368H19.1c-.445 0-.72.498-.523.898.591 1.2.924 2.55.924 3.977a8.958 8.958 0 01-1.302 4.666c-.245.403.028.959.5.959h1.053c.832 0 1.612-.453 1.918-1.227z"/>
19+
</svg>
20+
No
21+
</button>
22+
</div>
23+
<div class="feedback-options">
24+
<div class="feedback-options-title">What is the reason for your feedback? <span class="required">*</span></div>
25+
<div class="feedback-checkboxes">
26+
<label class="feedback-checkbox">
27+
<input type="checkbox" data-reason="hard-to-understand">
28+
<span class="checkmark"></span>
29+
Content is hard to understand
30+
</label>
31+
<label class="feedback-checkbox">
32+
<input type="checkbox" data-reason="code-doesnt-work">
33+
<span class="checkmark"></span>
34+
Procedure or code doesn't work
35+
</label>
36+
<label class="feedback-checkbox">
37+
<input type="checkbox" data-reason="couldnt-find">
38+
<span class="checkmark"></span>
39+
Couldn't find what I need
40+
</label>
41+
<label class="feedback-checkbox">
42+
<input type="checkbox" data-reason="out-of-date">
43+
<span class="checkmark"></span>
44+
Out of date/obsolete
45+
</label>
46+
<label class="feedback-checkbox">
47+
<input type="checkbox" data-reason="other">
48+
<span class="checkmark"></span>
49+
Other
50+
</label>
51+
</div>
52+
<div class="feedback-more">
53+
<div class="feedback-more-title">Tell us more.</div>
54+
<textarea class="feedback-textarea" placeholder="Please provide feedback on how we can improve this content. If applicable, provide the first part of the sentence or string at issue."></textarea>
55+
<button class="feedback-submit-btn">Submit</button>
56+
</div>
57+
</div>
58+
<div class="feedback-thanks">Thank you for your feedback!</div>
59+
</div>
60+
`;
61+
62+
article.insertAdjacentHTML('beforeend', feedbackHTML);
63+
64+
// Add click handlers
65+
const feedbackBtns = document.querySelectorAll('.feedback-btn');
66+
const thanksMessage = document.querySelector('.feedback-thanks');
67+
const feedbackOptions = document.querySelector('.feedback-options');
68+
const checkboxes = document.querySelectorAll('.feedback-checkbox input[type="checkbox"]');
69+
const submitBtn = document.querySelector('.feedback-submit-btn');
70+
const textarea = document.querySelector('.feedback-textarea');
71+
72+
feedbackBtns.forEach(btn => {
73+
btn.addEventListener('click', function() {
74+
const feedback = this.dataset.feedback;
75+
76+
// Remove selected class from all buttons
77+
feedbackBtns.forEach(b => b.classList.remove('selected'));
78+
79+
// Add selected class to clicked button
80+
this.classList.add('selected');
81+
82+
if (feedback === 'yes') {
83+
// Hide options and show thanks
84+
feedbackOptions.style.display = 'none';
85+
thanksMessage.style.display = 'block';
86+
87+
// Send positive feedback
88+
if (typeof gtag !== 'undefined') {
89+
gtag('event', 'page_feedback', {
90+
'feedback_value': 'positive',
91+
'page_location': window.location.href
92+
});
93+
}
94+
} else {
95+
// Show options for negative feedback
96+
feedbackOptions.style.display = 'block';
97+
thanksMessage.style.display = 'none';
98+
}
99+
});
100+
});
101+
102+
// Handle submit button
103+
submitBtn.addEventListener('click', function() {
104+
const selectedReasons = [];
105+
checkboxes.forEach(checkbox => {
106+
if (checkbox.checked) {
107+
selectedReasons.push(checkbox.dataset.reason);
108+
}
109+
});
110+
const additionalFeedback = textarea.value.trim();
111+
112+
// Hide options and show thanks
113+
feedbackOptions.style.display = 'none';
114+
thanksMessage.style.display = 'block';
115+
116+
// Send negative feedback with details
117+
if (typeof gtag !== 'undefined') {
118+
gtag('event', 'page_feedback', {
119+
'feedback_value': 'negative',
120+
'feedback_reasons': selectedReasons,
121+
'feedback_details': additionalFeedback,
122+
'page_location': window.location.href
123+
});
124+
}
125+
});
126+
}
127+
});

‎docs/api/index.rst‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,12 @@ API Reference
22
=============
33

44
Complete API documentation for SageMaker Python SDK V3.
5+
6+
.. toctree::
7+
:maxdepth: 2
8+
:caption: API Reference
9+
10+
sagemaker_core
11+
sagemaker_train
12+
sagemaker_serve
13+
sagemaker_mlops

0 commit comments

Comments
 (0)