Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: fix styles #18

Merged
merged 2 commits into from
Apr 13, 2024
Merged

chore: fix styles #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2999c29
chore: fix styles
sykp241095 Apr 13, 2024
691970d
update readme
wd0517 Apr 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions examples/llamaindex_rag/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,10 @@ export TIDB_PASSWORD="****"

```bash
# prepare the data
python example.py prepare
python app.py prepare

# runserver
python example.py runserver
python app.py runserver
```

Now you can visit [http://127.0.0.1:8000/](http://127.0.0.1:8000/) to interact with the RAG application.
Now you can visit [http://127.0.0.1:3000/](http://127.0.0.1:3000/) to interact with the RAG application.
6 changes: 4 additions & 2 deletions examples/llamaindex_rag/example.py → examples/llamaindex_rag/app.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,10 +81,12 @@ def cli():


@cli.command()
@click.option('--host', default='127.0.0.1', help="Host, default=127.0.0.1")
@click.option('--port', default=3000, help="Port, default=3000")
@click.option('--reload', is_flag=True, help="Enable auto-reload")
def runserver(reload):
def runserver(host, port, reload):
uvicorn.run(
"__main__:app", host="0.0.0.0", port=8000, reload=reload,
"__main__:app", host=host or "127.0.0.1", port=port or 8000, reload=reload,
log_level="debug", workers=1,
)

Expand Down
234 changes: 78 additions & 156 deletions examples/llamaindex_rag/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,169 +1,91 @@
<!DOCTYPE html>
<html lang="zh-CN">
<!-- Generated by AI -->
<head>
<meta charset="UTF-8">
<title>RAG Demo</title>
<link rel="stylesheet" href="https://unpkg.com/sanitize.css">
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f7f7f7;
}

.container {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background: white;
padding: 20px;
border-radius: 8px;
width: 400px;
}

input,
button {
width: 100%;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
border: 1px solid #ddd;
}

button {
width: 100%;
padding: 10px;
margin-top: 10px;
border-radius: 5px;
border: 1px solid #ddd;
background-color: #0056b3;
color: white;
cursor: pointer;
}

button:hover {
background-color: #004494;
}

button:disabled {
background-color: #ccc;
color: #666;
cursor: not-allowed;
}


#responses {
margin-top: 20px;
background: #f0f0f0;
padding: 10px;
height: 150px;
overflow-y: auto;
font-size: 0.9em;
border-radius: 5px;
}

.loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.8);
display: flex;
align-items: center;
justify-content: center;
}

.loading-spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
width: 36px;
height: 36px;
border-radius: 50%;
border-left-color: #09f;
animation: spin 1s linear infinite;
}

@keyframes spin {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}
</style>
<head>
<meta charset="UTF-8">
<title>LlamaIndex & TiDB RAG Demo</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://unpkg.com/marked@0.3.6"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
</head>

<body>
<div id="app" class="container">
<input type="text" v-model="question" placeholder="Input question...">
<button :disabled="loading" @click="askQuestion">Ask</button>
<div id="responses" style="position: relative;">
<div v-if="loading && responses == ''" class="loading-overlay">
<div class="loading-spinner"></div>
</div>
<div v-html="responses"></div>
</div>
<div class="flex justify-center py-40">
<div id="app" class="w-1/2">
<label class="block">
<input type="text" v-model="question" placeholder="Input question..."
class="block p-2 w-full border-solid border-gray-300 focus:border-gray-900 border rounded-none focus:outline-none">
</label>
<button type="button" class="bg-black block w-full my-2 p-2 rounded text-white" :disabled="loading"
@click="askQuestion">
<i v-if="loading && responses == ''" class="fas fa-spinner animate-spin"></i>
Ask
</button>
<div id="responses" class="w-full min-h-full border py-2 px-6">
<div v-html="compiledMarkdown">Empty</div>
</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
question: 'What did the author do growing up?',
responses: '',
loading: false
},
methods: {
askQuestion: function () {
const self = this;
if (this.question.trim() === '') {
alert('Please input a question.');
</div>
<script>
new Vue({
el: '#app',
data: {
question: 'What did the author do at each stage of his/her growth? Use markdown format if possible',
responses: 'Empty...',
loading: false
},
computed: {
compiledMarkdown: function () {
return marked(this.responses, { sanitize: true });
}
},
methods: {
askQuestion: function () {
const self = this;
if (this.question.trim() === '') {
alert('Please input a question.');
return;
}
self.responses = '';
self.loading = true;
fetch(`/ask?q=${encodeURIComponent(this.question)}`)
.then(response => {
const reader = response.body.getReader();
const stream = new ReadableStream({
start(controller) {
function push() {
reader.read().then(({ done, value }) => {
if (done) {
controller.close();
self.loading = false;
return;
}
self.responses = '';
self.loading = true;
fetch(`/ask?q=${encodeURIComponent(this.question)}`)
.then(response => {
const reader = response.body.getReader();
const stream = new ReadableStream({
start(controller) {
function push() {
reader.read().then(({ done, value }) => {
if (done) {
controller.close();
self.loading = false;
return;
}
const chunk = new TextDecoder("utf-8").decode(value);
self.responses += chunk;
controller.enqueue(value);
push();
}).catch(error => {
self.loading = false;
console.error('Fetch error:', error);
controller.error(error);
});
}
push();
}
});
return new Response(stream);
})
.catch(error => {
console.error('Fetch error:', error);
self.loading = false;
alert('An error occurred while fetching the response.');
});
}
const chunk = new TextDecoder("utf-8").decode(value);
self.responses += chunk;
controller.enqueue(value);
push();
}).catch(error => {
self.loading = false;
console.error('Fetch error:', error);
controller.error(error);
});
}
push();
}
}
});
</script>
});
return new Response(stream);
})
.catch(error => {
console.error('Fetch error:', error);
self.loading = false;
alert('An error occurred while fetching the response.');
});
}
}
});
</script>
</body>

</html>
Loading