-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.vue
149 lines (131 loc) · 3.23 KB
/
app.vue
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<template>
<div class="container">
<h1>AI Content Detector</h1>
<!-- Introduction -->
<div class="satirical-intro">
<p>Are you a teacher or professor? Are you tired of not knowing if your students are cheating?</p>
<p>Maybe you hired a contractor to generate some content for you, and you want to know whether they really worked for all those hours they billed you.</p>
<p>Well, fear no more, the AI-content-detector is here to save the day!</p>
<p>Our advanced AI technology boasts a 99.9% accuracy rate, or so we hope. You're free to test the accuracy yourself, but be warned that testing your own texts might reveal that you're not human but AI.</p>
<p>Contact our Sales team if you wnat to unlock the full power of AI detection!</p>
</div>
<div class="form-group">
<label for="content">Enter Text to inspect:</label>
<input type="text" id="content" v-model="textInput" placeholder="Enter text here...">
</div>
<button @click="openModal">Detect presence of AI</button>
<!-- Modal -->
<div class="modal" v-if="modalVisible">
<div class="modal-content">
<span class="close" @click="closeModal">×</span>
<h2>Detection Result</h2>
<p>{{ detectionResult }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
textInput: '',
previousInput: '',
modalVisible: false,
detectionResult: '',
};
},
methods: {
openModal() {
if(this.previousInput !== this.textInput) {
const randomValue = Math.round(1000 * (Date.now() + Math.random()))
const isAI = randomValue % 2
if(isAI) {
this.detectionResult = `Detected AI in given Input!`;
}
else {
this.detectionResult = `Could not detect AI. Either the input is human generated or it was made by a better AI`;
}
}
this.previousInput = this.textInput
this.modalVisible = true;
},
closeModal() {
console.log('close modal')
this.modalVisible = false;
},
},
};
</script>
<style scoped>
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
form {
margin: 20px 0;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
}
input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
button {
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}
/* Modal styles */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 5px;
max-width: 80%;
text-align: center;
position: relative;
}
.close {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
cursor: pointer;
}
.satirical-intro {
text-align: center;
font-style: italic;
margin-bottom: 20px;
}
</style>