-
Notifications
You must be signed in to change notification settings - Fork 20
/
Copy pathindex.html
103 lines (86 loc) · 2.89 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
<head>
<script
crossorigin="anonymous"
src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"
></script>
<style>
html,
body {
height: 100%;
/* background-image: linear-gradient(slategrey, darkslategrey); */
background-image: linear-gradient( #343541,#525468);
color: antiquewhite;
font-family: 'Segoe UI', Calibri, sans-serif;
}
body {
padding-left: 5px;
}
#webchat {
height: 85%;
width: 100%;
}
.webchat__stacked-layout__main{
white-space: break-spaces;
}
.webchat__stacked-layout--from-user{
background-color: rgba(32,33,35, .2);
}
</style>
</head>
<body>
<h1><img src='https://logos-world.net/wp-content/uploads/2021/02/Microsoft-Azure-Emblem.png' height="40">Azure OpenAI service - ChatGPT</h1>
<pre>version 20230320 | model: ChatGPT (turbo) | max_tokens: 1500 | temperature: 0.7 | Speech input enabled: true | Speech language: EN</pre>
<div style="" id="webchat" role="main"></div>
<script>
// Set the CSS rules.
const styleSet = window.WebChat.createStyleSet({
bubbleBackground: 'transparent',
bubbleBorderColor: 'darkslategrey',
bubbleBorderRadius: 5,
bubbleBorderStyle: 'solid',
bubbleBorderWidth: 0,
bubbleTextColor: 'antiquewhite',
userAvatarBackgroundColor: 'rgba(53, 55, 64, .3)',
bubbleFromUserBackground: 'transparent',
bubbleFromUserBorderColor: '#E6E6E6',
bubbleFromUserBorderRadius: 5,
bubbleFromUserBorderStyle: 'solid',
bubbleFromUserBorderWidth: 0,
bubbleFromUserTextColor: 'antiquewhite',
notificationText: 'white',
bubbleMinWidth: 400,
bubbleMaxWidth: 720,
botAvatarBackgroundColor: 'antiquewhite',
avatarBorderRadius: 2,
avatarSize: 40,
rootHeight: '100%',
rootWidth: '100%',
backgroundColor: 'rgba(70, 130, 180, .2)',
hideUploadButton: 'true'
});
// After generated, you can modify the CSS rules.
// Change font family and weight.
styleSet.textContent = {
...styleSet.textContent,
fontWeight: 'regular'
};
// Set the avatar options.
const avatarOptions = {
botAvatarInitials: '.',
userAvatarInitials: 'Me',
botAvatarImage: 'https://dwglogo.com/wp-content/uploads/2019/03/1600px-OpenAI_logo-1024x705.png',
};
window.WebChat.renderWebChat(
{
directLine: window.WebChat.createDirectLine({
token: '***'
}),
styleSet, styleOptions: avatarOptions
},
document.getElementById('webchat')
);
</script>
</body>
</html>